CSS Один столбец на мобильном телефоне, два на рабочем столе

Question

У меня есть страница с 1 столбцом на мобильных и 2 колонках на рабочем столе. На мобильном устройстве я хочу следовать порядку элементов в HTML (статья 1, статья 2, статья 3, статья 4).

На рабочем столе Я хочу соединить все элементы с левым столбцом класса в левом столбце и всеми элементами с правым столбцом класса в правом столбце.

Таким образом, в приведенном ниже примере я хочу показать в левой колонке: статьи, статье 1 3, статья 4. А в правой колонке статьи 2 и статьи 5.

Требования:

• содержание статьи изменяется (не все статьи имеют одинаковую высоту)
• Я не хочу, разрыв между статьей 2 & 5 в правой колонке (или пробелы между статьями в левой колонке)
• Все границы должны будет отображаться
• Там должна быть разница между левой и правой колонке
• Порядок статей в HTML не может быть изменен

@media all and (min-width: 600px) { 
 

 
    /* no idea what to do here */ 
 

 
} 
 

 
/* rest of styling */ 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
h1 { 
 
    font-size: 1em; 
 
    font-family: sans-serif; 
 
    text-align: left; 
 
    margin-bottom: .2em; 
 
} 
 
h1 + p { 
 
    margin-top: 0; 
 
} 
 
article { 
 
    border: 1px solid #CCC; 
 
    padding: 10px; 
 
}

<div class="wrapper"> 
 
    <article class="left-column"> 
 
    <h1>Article 1</h1> 
 
    <p>Shown in left column</p> 
 
    </article> 
 
    <article class="right-column"> 
 
    <h1>Article 2</h1> 
 
    <p>Shown in right column</p> 
 
    </article> 
 
    <article class="left-column"> 
 
    <h1>Article 3</h1> 
 
    <p>Shown in left column</p> 
 
    </article> 
 
    <article class="left-column"> 
 
    <h1>Article 4</h1> 
 
    <p>Shown in left column</p> 
 
    </article> 
 
    <article class="right-column"> 
 
    <h1>Article 5</h1> 
 
    <p>Shown in right column</p> 
 
    </article> 
 
</div>

обновление

Быть ясным. Я не хочу, чтобы результат как это: Но как это:

Answer 1

Попробуйте использовать загрузчик.

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
 
     article 1 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
 
     article 2 
 
    </div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
 
     article 3 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
 
     article 4 
 
    </div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
 
     article 5 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
 
     
 
    </div> 
 
    </div> 
 
    
 
</div>

Answer 2

Добавить CSS:

.wrapper { 
     margin-right: -15px; 
     margin-left: -15px; 
} 
.left-column, .right-column { 
     padding-right: 15px; 
     padding-left: 15px; 
     box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
} 

@media only screen and (min-width:768px) { 
    .left-column, .right-column { 
     width: 50%; 
     float: left; 
    } 
    } 

Answer 3

ли ридовского через раздел отзывчивым CSS на W3Schools.

Добавление строк и столбцов в ваш HTML-код будет определять, как вы хотите, и изменять размер в полноэкранном режиме на небольших мобильных устройствах.

* { 
 
    box-sizing: border-box; 
 
} 
 
.row::after { 
 
    content: ""; 
 
    clear: both; 
 
    display: table; 
 
} 
 
[class*="col-"] { 
 
    width: 100%; 
 
    float: left; 
 
} 
 
@media only screen and (min-width: 600px) { 
 
    .col-1 { 
 
    width: 8.33%; 
 
    } 
 
    .col-2 { 
 
    width: 16.66%; 
 
    } 
 
    .col-3 { 
 
    width: 25%; 
 
    } 
 
    .col-4 { 
 
    width: 33.33%; 
 
    } 
 
    .col-5 { 
 
    width: 41.66%; 
 
    } 
 
    .col-6 { 
 
    width: 50%; 
 
    } 
 
    .col-7 { 
 
    width: 58.33%; 
 
    } 
 
    .col-8 { 
 
    width: 66.66%; 
 
    } 
 
    .col-9 { 
 
    width: 75%; 
 
    } 
 
    .col-10 { 
 
    width: 83.33%; 
 
    } 
 
    .col-11 { 
 
    width: 91.66%; 
 
    } 
 
    .col-12 { 
 
    width: 100%; 
 
    } 
 
} 
 
h1 { 
 
    font-size: 1em; 
 
    font-family: sans-serif; 
 
    text-align: left; 
 
    margin-bottom: .2em; 
 
} 
 
h1 + p { 
 
    margin-top: 0; 
 
} 
 
article { 
 
    border: 1px solid #CCC; 
 
    padding: 10px; 
 
}

<div class="wrapper"> 
 
    <div class="row"> 
 
    <article class="col-6"> 
 
     <h1>Article 1</h1> 
 
     <p>Shown in left column</p> 
 
    </article> 
 
    <article class="col-6"> 
 
     <h1>Article 2</h1> 
 
     <p>Shown in right column</p> 
 
    </article> 
 
    </div> 
 
    <div class="row"> 
 
    <article class="col-6"> 
 
     <h1>Article 3</h1> 
 
     <p>Shown in left column</p> 
 
    </article> 
 
    <article class="col-6"> 
 
     <h1>Article 4</h1> 
 
     <p>Shown in left column</p> 
 
    </article> 
 
    </div> 
 
    <div class="row"> 
 
    <article class="col-6"> 
 
     <h1>Article 5</h1> 
 
     <p>Shown in right column</p> 
 
    </article> 
 
    </div> 
 
</div>

Answer 4

Я думаю, что все секции отмечены левая колонка должна быть размещена слева и вся правая колонка должна быть размещена правильно. Возможно, вам понадобится обезьяна с порядком суса, чтобы получить заказ. Затем установите их ширину на 20% или около того, и скрипьте значения ширины и поля, пока они не сядут правильно. В мобильном режиме вы можете сохранить поплавки, но установите для всех ширины значение 100%. И не забудьте очистить все поплавки потом.