Как переместить 2 строки и 2 столбца в 1 ряд на меньших экранах, но исправить столбцы по порядку

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>

В настоящее время он работает, как и ожидалось, на небольших дисплеях, но на больших дисплеях обе строки находятся на разных строках.Когда я пытаюсь разместить их в одной строке, это приводит к неправильной работе на меньших дисплеях

Я добавил стиль, и мой вопрос содержит больше кода, поэтому добавляется больше текста для публикации.Спасибо

Answer 1

Столбцы показывают кроме друг друга на большом экране и на верхней части друг друга на маленьком экране.

В вашем HTML / Bootstrap были некоторые ошибки, особенно из-за того, что вы пытались поместить более чем 12 столбцовых единиц в одну строку.

Вот решение:

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>

Удачи, и дайте мне знать, как это получилось!