Twitter的引導重撥元素

Question

我有一個頁面上的佈局如下：
在左邊我的桌面（LG）版本，以及右側的重新排序，我想對小設備。

有了這個代碼：

 <div class="row"> 
 
      <div class="col-sm-6 col-sm-push-6"> 
 
       <div class="alert alert-danger"><h1>Lorem Ipsum (2)</h1> 
 
        <br> 
 
        Rostfreie Bohrbefestiger für Stahl- und Aluminiumunterkonstruktionen </div> 
 
      </div> 
 
      <div class="col-sm-6 col-sm-pull-6"> 
 
       <div class="alert alert-info">Image (1) 
 

 
        <p></p> 
 

 
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p> 
 
        <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata .</p> 
 

 
        <p></p> 
 

 
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p> 
 
        <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata .</p> 
 

 
       </div> 
 
      </div> 
 

 
     </div> 
 

 
     <div class="row"> 
 

 
      <div class="col-md-6 col-md-offset-6 col-sm-6 col-sm-offset-6 col-lg-offset-6"> 
 
       <div class="alert alert-info">Description (3)</div> 
 
      </div> 
 

 
     </div>

我獲得與桌面視圖一個問題： 看到PRINTSCREEN：

任何建議，以解決這一問題，以顯示描述元素（3）直接在元素「2」下受歡迎。

非常感謝。

Answer 1

嘗試以下操作：

<div class="row"> 
    <div class="col-sm-12 col-lg-6 pull-right"> 
     <div class="alert alert-danger"><h1>Lorem Ipsum (2)</h1> 
      <br> 
      Rostfreie Bohrbefestiger für Stahl- und Aluminiumunterkonstruktionen </div> 
    </div> 
    <div class="col-sm-12 col-lg-6 pull-left"> 
     <div class="alert alert-info">Image (1) 

      <p></p> 

      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p> 
      <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata .</p> 

      <p></p> 

      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p> 
      <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata .</p> 

     </div> 
    </div> 

    <div class="col-sm-12 col-lg-6 pull-right"> 
     <div class="alert alert-info">Description (3)</div> 
    </div> 

</div> 

Answer 2

嘗試在您的div中添加col-xs-12。您的DIV將在小型設備上所有的寬度：

<div class="row"> 
    <div class="col-sm-6 col-sm-push-6 col-xs-12"> 
     <div class="alert alert-danger"><h1>Lorem Ipsum (2)</h1> 
      <br> 
      Rostfreie Bohrbefestiger für Stahl- und Aluminiumunterkonstruktionen </div> 
    </div> 
    <div class="col-sm-6 col-sm-pull-6 col-xs-12"> 
     <div class="alert alert-info">Image (1) 

      <p></p> 

      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p> 
      <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata .</p> 

      <p></p> 

      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p> 
      <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata .</p> 

     </div> 
    </div> 

</div> 

<div class="row"> 

    <div class="col-md-6 col-md-offset-6 col-sm-6 col-sm-offset-6 col-lg-offset-6 col-xs-12"> 
     <div class="alert alert-info">Description (3)</div> 
    </div> 

</div> 

Answer 3

這是Flexbox的和一個解決方案的JQueryFiddle

$(window).on("resize", function() { 
 
    if($(window).width() < 768) { 
 
    $('.right').replaceWith(function() { 
 
     return $('.box', this); 
 
     }); 
 
    } else { 
 
    if($('.right').length === 0){ 
 
     \t $('.box-2, .box-3').wrapAll('<div class="right">'); 
 
     } 
 
    } 
 
}).resize();

.content { 
 
    height: 100vh; 
 
    display: flex; 
 
} 
 

 
.box { 
 
    flex: 1; 
 
    background: #36434B; 
 
    margin: 10px; 
 
    color: white; 
 
    font-size: 50px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.right { 
 
    flex-direction: column; 
 
    display: flex; 
 
    flex: 1; 
 
} 
 

 
.right .box:last-child { 
 
    flex: 2; 
 
} 
 

 
@media(max-width: 768px) { 
 
    .content { 
 
    flex-direction: column; 
 
    } 
 
    
 
    .box-1 { 
 
    order: 2; 
 
    flex: 3; 
 
    } 
 
    
 
    .box-2 { 
 
    order: 1; 
 
    flex: 1; 
 
    } 
 
    
 
    .box-3 { 
 
    order: 3; 
 
    flex: 2; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <div class="box box-1">1</div> 
 
    <div class="right"> 
 
    <div class="box box-2">2</div> 
 
    <div class="box box-3">3</div> 
 
    </div> 
 
</div>