Twitter elementi di bootstrap di riordino su piccoli dispositivi

Question

Ho il seguente layout di una pagina:
A sinistra ho la versione desktop (lg), e sulla destra il riordino che voglio avere sulla piccola dispositivi.

Con questo codice:

 <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>

ho un problema con la vista del desktop: vedo printscreen:

Eventuali proposte per risolvere questo problema e per mostrare la elemento di descrizione (3) diretto sotto l'elemento "2" sono i benvenuti.

Grazie mille.

Answer 1

provare quanto segue:

<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

Prova ad aggiungere col-xs-12 ai tuoi div. Il tuo div avrà tutta la larghezza su piccoli dispositivi:

<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

Questa è una soluzione con Flexbox e 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>