So ändern Sie das Design für mobile (Bootstrap)

Question

Ich arbeite derzeit am Aufbau einer Website. Ich habe ein grundlegendes Preisdiagramm für die Website entworfen (mit Bootstrap) Das Problem, das ich habe, ist, wenn ich mein Fenster Größe ändern, wird das Design falsch ausgerichtet. Hier

ist der Code für das aktuelle Design bisher

<div class="background-pricing container-fluid"> 
    <div class="container"> 
     <div class="row"> 
      <div class="payment-method">We accept: Cash and Checks with payment due on Fridays of each week.</div> 
     </div> 
<!--infants and children --> 
     <div class="row"> 
      <div class="infants-box col-sm-6 col-md-6 col-lg-6"> 
       <div class="infants">Infants</div> 
      </div> 
      <div class="col-sm-6 col-md-6 col-lg-6"> 
       <div class="children">Children 2+</div> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="full-time col-sm-6 col-md-6 col-lg-2">Full Time</div> 
      <div class="prices-left-box col-sm-5 col-md-3 col-lg-5"> 
       <div class="prices-left">$200 Per Week</div> 
      </div> 
      <div class="prices-right-box col-sm-5 col-md-3 col-lg-5"> 
       <div class="prices-right">$150 Per Week</div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="full-time col-sm-2 col-md-2 col-lg-2">Up to 4 Hours</div> 
      <div class="prices-left-box col-sm-5 col-md-5 col-lg-5"> 
       <div class="prices-left">$125 Per Week</div> 
      </div> 
      <div class="prices-right-box col-sm-5 col-md-5 col-lg-5"> 
       <div class="prices-right">$100 Per Week</div> 
      </div> 
     </div> 
    </div> 
</div> 

Wie Sie sehen können, in vollem Umfang nutzen, das Diagramm lesbar ist, aber wenn die Größe verändert, ist das Diagramm nicht lesbar mit den „Kindern“ und " Kinder 2+ "nebeneinander.

Wie würde ich es einfacher zu lesen machen?

Answer 1

Sie können die Reihenfolge der Spalten in kleineren Bildschirmen nicht ändern, aber Sie können dies in großen Bildschirmen tun.

Ändern Sie die Reihenfolge Ihrer Spalten.

<!--Main Content--> 
<div class="col-lg-9 col-lg-push-3"> 
</div> 

<!--Sidebar--> 
<div class="col-lg-3 col-lg-pull-9"> 
</div> 

Standardmäßig wird zuerst der Hauptinhalt angezeigt.

Also im mobilen Hauptinhalt wird zuerst angezeigt.

Mit col-lg-push und col-lg-pull können wir die Spalten in großen Bildschirmen neu anordnen und die Seitenleiste links und den Hauptinhalt rechts anzeigen.

Arbeiten fiddle here.