Изменение порядка столбцов при загрузке страницы с рабочего стола на адаптивный макет мобильного телефона - PullRequest
Новая
       7

Изменение порядка столбцов при загрузке страницы с рабочего стола на адаптивный макет мобильного телефона

2 голосов
/ 10 ноября 2019

В приведенном ниже макете, когда ширина страницы меньше 600 пикселей, я хочу разместить Столбец2 выше Столбец1 Я пытался использовать display: flex; flex-direction: column-reverse;, но вместо того, чтобы поменять местамипорядок столбца - обратный порядок содержимого столбца.

Вот фрагмент кода. 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    /**Uncommenting below will lead to content of column reversed and not the order of column reversed**/
    /*display: flex;
    flex-direction: column-reverse;*/
  }
}
</style>
</head>
<body>

<h2>Responsive Two Column Layout</h2>
<p>Resize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).</p>
<div class="row" style="height: 20px; background-color: red;">
</div>
<div class="row" style="height: 20px; background-color: blue;">
</div>
<div class="row">
  <div class="column" style="background-color:#aaa;">
  	<div class="cls1">
    	<h2>Column 1</h2>
    	<p>Some text..</p>
    </div>
    <div class="cls2">
    	<h2>Column 1.2</h2>
    	<p>Some text..</p>
    </div>
    <div class="cls3">
    	<h2>Column 1.3</h2>
    	<p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
</div>

</body>
</html>

Любая помощь будет благодарна.

Ответы [ 2 ]

0 голосов
/ 10 ноября 2019

Вот правильная реализация с рабочим примером, основанным на принятом ответе @ajobi: 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

.row {
  display: flex;  // makes the row a flex container
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column-reverse;
  }
  .column {
    width: 100%;
    /**Uncommenting below will lead to content of column reversed and not the order of column reversed**/
    /*display: flex;
    flex-direction: column-reverse;*/
  }
}
</style>
</head>
<body>

<h2>Responsive Two Column Layout</h2>
<p>Resize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).</p>
<div class="row" style="height: 20px; background-color: red;">
</div>
<div class="row" style="height: 20px; background-color: blue;">
</div>
<div class="row">
  <div class="column" style="background-color:#aaa;">
  	<div class="cls1">
    	<h2>Column 1</h2>
    	<p>Some text..</p>
    </div>
    <div class="cls2">
    	<h2>Column 1.2</h2>
    	<p>Some text..</p>
    </div>
    <div class="cls3">
    	<h2>Column 1.3</h2>
    	<p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
</div>

</body>
</html>
0 голосов
/ 10 ноября 2019

Вы попытались добавить display:flex к столбцу, что сделало столбец flex container и элементы внутри него его flex items. Вот почему вы меняли содержимое внутри столбцов, а не сами столбцы. Вместо этого вы хотите контролировать столбцы внутри строки. Для этого вам нужно сделать строку вашей flex container (применить display:flex к строке вместо столбца). Вот рабочий CSS для вашего случая: 

.row {
  display: flex;  // makes the row a flex container
}

@media screen and (max-width: 600px) {
  .row {
    flex-direction: column-reverse;
  }
}

.column {
  flex-grow: 1;  // makes all columns fill the width of the row equally
  padding: 0 10px;
}
...