How to move 2 rows and 2 columns into 1 row on smaller screens but correct columns in order

Question

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<style>
/* SECTION WITH LINES */
.section > div {
    border: 2px solid rgba(0,0,0,0.1);
    padding: .3em .8em;
    margin-top: 2em;
    position: relative;
    text-transform: uppercase;
    font-size: 1.2em;
    color: #555;
    font-weight: 600;
    text-align: center;
 }

.section > div:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    border-bottom: 2px solid;
    width: 90%;
    margin: 0 20px;
    color: rgba(0,0,0,0.1);
}

.section > div:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    border-bottom: 2px solid;
    width: 90%;
    margin: 0 20px;
    color: rgba(0,0,0,0.1);
}
/* HALF SECTION WITH LINES */
.h-section > span {
    border: 2px solid rgba(0,0,0,0.1);
    padding: .3em .8em;
    margin-top: 2em;
    margin-bottom: 2em;
    position: relative;
    text-transform: uppercase;
    font-size: 1.3em;
    color: #555;
    font-weight: 600;
    z-index: 1;
    text-align: center;
    float: left;
    height: 50px;
}

.h-section > span:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    border-bottom: 2px solid;
    width: 40%;
    margin: 0 20px;
    color: rgba(0,0,0,0.1);
}

.h-section > span:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    border-bottom: 2px solid;
    width: 40%;
    margin: 0 20px;
    color: rgba(0,0,0,0.1);
}
</style>

<div class="container">

    <div class="d-flex justify-content-center section col-lg-4 offset-lg-4 col-md-6 offset-md-3 col-sm-6 offset-sm-3 col-xs-6">
        <div>What service do you require?</div>
    </div>


    <div class="container">
    <div class="row">
    
        <div class="d-flex-lg justify-content-between">
        <div class="d-flex justify-content-center col-lg-6 h-section"><span>What we offer</span></div>
        <div class="justify-content-center col-lg-6">
            Blah
        </div>



        <div class="d-flex justify-content-center col-lg-6 h-section"><span>Our benefits</span></div>
            <div class="d-flex justify-content-center col-lg-6">
                Blah 2
            </div>
        </div>
        </div>


    </div>
    </div>


</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<style>
/* HALF SECTION WITH LINES */
.h-section > span {
    border: 2px solid rgba(0,0,0,0.1);
    padding: .3em .8em;
    margin-top: 2em;
    margin-bottom: 2em;
    position: relative;
    text-transform: uppercase;
    font-size: 1.3em;
    color: #555;
    font-weight: 600;
    z-index: 1;
    text-align: center;
    float: left;
    height: 50px;
}

.h-section > span:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    border-bottom: 2px solid;
    width: 40%;
    margin: 0 20px;
    color: rgba(0,0,0,0.1);
}

.h-section > span:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    border-bottom: 2px solid;
    width: 40%;
    margin: 0 20px;
    color: rgba(0,0,0,0.1);
}
</style>

 <div class="container">
    <div class="row">

        <div class="d-flex-lg justify-content-between">
        <div class="d-flex justify-content-center col-lg-6 h-section"><span>What we offer</span></div>
        <div class="justify-content-center col-lg-6">
            Blah
        </div>



        <div class="d-flex justify-content-center col-lg-6 h-section"><span>Our benefits</span></div>
            <div class="d-flex justify-content-center col-lg-6">
                Blah 2
            </div>
        </div>
        </div>


    </div>
</div>

Currently it works as expected on smaller displays but on larger displays, both rows are on different lines. When I try to get them on the same line, it breaks it working correctly on smaller displays

I added the style and my question contains more code so this is adding more text so that it will post. Thanks

Can you be more specific to what it is that you want. Maybe I can help you. — yuko, May 09 '19 at 10:18
@YuKo If you view the code snippet, it looks fine on smaller screen... view it full screen, it looks wrong. On large screen I want "What we offer" above "Blah" and next to "Our benefits" above "Blah 2" — Scoop, May 09 '19 at 10:20
Do you want both `What we offer` and `Our benefits` parts to be on the same line? — yuko, May 09 '19 at 10:20
I am working on it. Just to be sure. On smaller screen its ok that `What we offer` and `Our benefits` are on top of each other, but on larger screen you want them to be besides each other? — yuko, May 09 '19 at 10:37

score 0 · Accepted Answer · answered May 09 '19 at 11:16

The columns show besides eachother in large screen and on top of eachother in a small screen.

There were some mistakes in your HTML/Bootstrap, most notably that you were trying to have more than 12 col units in one row.

Here is the solution:

CSS:

.column_title {
    border: 2px solid rgba(0,0,0,0.1);
    padding: .3em .8em;
    margin-top: 2em;
    margin-bottom: 2em;
    position: relative;
    text-transform: uppercase;
    font-size: 1.3em;
    color: #555;
    font-weight: 600;
    z-index: 1;
    text-align: center;
    float: left;
    height: 50px;
}

.column_title:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    border-bottom: 2px solid;
    width: 40%;
    margin: 0 20px;
    color: rgba(0,0,0,0.1);
}

.column_title:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    border-bottom: 2px solid;
    width: 40%;
    margin: 0 20px;
    color: rgba(0,0,0,0.1);
}

.column_text {
    float:left;
    clear:left;
}

HTML:

<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <div class="column_title">What we offer</div>
            <div class="column_text">Blah 1</div>
        </div>
        <div class="col-lg-6">
            <div class="column_title">Our benefits</div>
            <div class="column_text">Blah 2</div>
        </div>
    </div>
</div>

Good luck and let me know how it turned out!

How to move 2 rows and 2 columns into 1 row on smaller screens but correct columns in order

1 Answers1