響應式SM和XS對齊

我想開發一個代碼，它在桌面上有兩列，當涉及到在'XS'和'SM'中的響應時，第一列應該在第二列之後。響應式SM和XS對齊

這裏是我正在嘗試的代碼。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<section class="Container-fluid"> 
 
\t <div class="row"> 
 
\t \t <div class="col-md-6 col-xs-8 col-sm-8 col-sm-offset-2 col-xs-offset-2 col-md-offset-0"> 
 
\t \t \t First box 
 
\t \t </div> 
 
\t \t <div class="col-md-6 col-xs-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-0"> 
 
\t \t \t Second Box 
 
\t \t </div> 
 
\t </div> 
 
</section>

In Desktop it should be viewed like this

In Responsive it should be viewed like this

來源

2015-02-05 Chandra Shekar Captain

嘗試。這是在引導。使用推，拉將有所幫助。順便說一下，我也爲你的班級做了一些清理工作。

<section class="Container-fluid"> 
     <div class="row"> 
      <div class="col-md-6 col-md-push-6 col-xs-8 col-xs-offset-2"> 
       Second Box 
      </div> 
      <div class="col-md-6 col-md-pull-6 col-xs-8 col-xs-offset-2"> 
       First box 
      </div>   
     </div> 
    </section>

來源

2015-02-06 07:43:05

這不起作用。應推動「第二盒」，並推出「第一盒」。你在jsfiddle或者bootply上試過了嗎？ – ZimSystem 2015-02-06 10:07:29

nope。謝謝。你好像在拖我的答案。謝謝你的方式。：d – 2015-02-06 10:12:06

你只需要考慮「移動第一」，首次提出了「2」列在您的標記：

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-6 col-md-push-6 col-md-offset-0 col-xs-8 col-xs-offset-2"> 
     Second Box 
    </div> 
    <div class="col-md-6 col-md-pull-6 col-md-offset-0 col-xs-8 col-xs-offset-2"> 
     First box 
    </div>   
    </div> 
</div>

http://bootply.com/mexjTUoy6m

另外，Container-fluid就是什麼也不做，因爲CSS是區分敏感，所以你要小心類名。

來源

2015-02-06 09:48:57 ZimSystem

響應式SM和XS對齊

回答

相關問題