Bootstrap Grid Bestellung responsive

-1

Hey da bin ich fest und ich suche jemanden, der mit Bootstrap erlebt hat.Bootstrap Grid Bestellung responsive

Dies ist meine aktuelle Situation:

Und das ist der entsprechende Code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <hr class="hrBig yellow" /> 
 
     <h3 class="yellow">1</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <hr class="hrBig lightgreen" /> 
 
     <h3 class="lightgreen">3</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <hr class="hrBig blue" /> 
 
     <h3 class="blue">5</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <hr class="hrBig orange" /> 
 
     <h3 class="orange">2</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <hr class="hrBig green" /> 
 
     <h3 class="green">4</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <hr class="hrBig brown" /> 
 
     <h3 class="brown">6</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p> 
 
    </div> 
 
</div>

Mein Problem ist, dass die Laschen wie dies im Tablet-Modus sein sollte:

12 
34 
56

Aber jetzt sind sie wie folgt aus:

Und auf Mobil sollten sie wie folgt aussehen:

Wie kann ich das erreichen?

Quelle

2017-10-13 Tim Gerhard

In SO wird von Ihnen erwartet, dass Sie versuchen, ** den Code selbst zu schreiben **. Nach ** [weitere Recherchen durchführen] (// meta.stackoverflow.com/questions/261592)** Wenn du ein Problem hast, kannst du ** alles posten, was du versucht hast ** mit einer ** klaren Erklärung dessen, was isn ' t funktioniert ** und liefert ein ** [minimales, vollständiges und verifizierbares Beispiel] (// stackoverflow.com/help/mcve)**. SO ist kein Code-Schreibdienst. – Rob

I benötigt, um Ihren Code ein wenig neu zu ordnen und einige Wrapper hinzugefügt, um zu erreichen, was Sie

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-md-4 col-sm-12"> 
 
     <div class="row"> 
 
     <div class="col-md-12 col-sm-6 col-12"> 
 
      <hr class="hrBig yellow" /> 
 
      <h3 class="yellow">1</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
     </div> 
 
     <div class="col-md-12 col-sm-6 col-12"> 
 
      <hr class="hrBig orange" /> 
 
      <h3 class="orange">2</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-4 col-sm-12"> 
 
     <div class="row"> 
 
     <div class="col-md-12 col-sm-6 col-12"> 
 
      <hr class="hrBig yellow" /> 
 
      <h3 class="yellow">3</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
     </div> 
 
     <div class="col-md-12 col-sm-6 col-12"> 
 
      <hr class="hrBig orange" /> 
 
      <h3 class="orange">4</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-4 col-sm-12"> 
 
     <div class="row"> 
 
     <div class="col-md-12 col-sm-6 col-12"> 
 
      <hr class="hrBig yellow" /> 
 
      <h3 class="yellow">5</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
     </div> 
 
     <div class="col-md-12 col-sm-6 col-12"> 
 
      <hr class="hrBig orange" /> 
 
      <h3 class="orange">6</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2017-10-13 09:22:12 Swellar

Danke Mann. funktioniert bei mir –

Sie mögen dies für Bootstrap verwenden können 3.3.7

wollen

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 

 
<div class="col-sm-4 col-xs-12"> 
 
    <div class="col-sm-12 col-xs-6"> 
 
     <hr class="hrBig yellow" /> 
 
     <h3 class="yellow">1</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
    </div> 
 

 
    <div class="col-sm-12 col-xs-6"> 
 
     <hr class="hrBig orange" /> 
 
     <h3 class="orange">2</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
    </div> 
 
</div> 
 

 

 
<div class="col-sm-4 col-xs-12"> 
 
    <div class="col-sm-12 col-xs-6"> 
 
     <hr class="hrBig lightgreen" /> 
 
     <h3 class="lightgreen">3</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
    </div> 
 

 
    <div class="col-sm-12 col-xs-6"> 
 
     <hr class="hrBig green" /> 
 
     <h3 class="green">4</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p> 
 
    </div> 
 
</div> 
 

 

 
<div class="col-sm-4 col-xs-12"> 
 
    <div class="col-sm-12 col-xs-6"> 
 
     <hr class="hrBig blue" /> 
 
     <h3 class="blue">5</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
    </div> 
 
    <div class="col-sm-12 col-xs-6"> 
 
     <hr class="hrBig brown" /> 
 
     <h3 class="brown">6</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p> 
 
    </div> 
 
</div> 
 

 
</div>

Quelle

2017-10-13 09:29:05 Vishnu

Bootstrap Grid Bestellung responsive

Antwort

Verwandte Themen