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

Question

, как достичь следующие действия с помощью начальной загрузки:

Desktop Вид

[col-md-9(number 1)][col-md-3(number 3)] 
[col-md-12(number 2)] 

Мобильный вид

[col-xs-12(number 1)] 
[col-xs-12(number 2)] 
[col-xs-12(number 3)] 

заранее спасибо

Answer 1

в этом случае не используйте толчок col и push. Вы используете видимый и скрытый класс.

<div class="row visible-xs visible-sm"> 
       <div class="col-xs-12" style="background-color:red">1</div> 
       <div class="col-xs-12" style="background-color:blue">2</div> 
       <div class="col-xs-12" style="background-color:green">3</div> 
      </div> 
      <div class="row visible-md visible-lg"> 
       <div class="col-xs-9" style="background-color:red">1</div> 
       <div class="col-xs-3" style="background-color:green">3</div> 
       <div class="col-xs-12" style="background-color:blue">2</div> 
      </div> 

Answer 2

div { 
 
    color: #fff; 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="col-xs-12 col-md-6" style="background-color:red">1</div> 
 
    <div class="col-xs-12 col-md-6 hidden-xs hiddem-sm" style="background-color:green">3 (visible in desktop and above)</div> 
 
    <div class="col-xs-12 col-md-12" style="background-color:blue">2</div> 
 
    <div class="col-xs-12 col-md-6 visible-xs visible-sm" style="background-color:green">3 (visible in tabs and mobile)</div> 
 
</div>

Вы не можете непосредственно достичь этого порядка, по крайней мере в одном случае, вам нужно скопировать контент и переключить его видимым на рабочем столе или мобильном режиме.