将Bootstrap列隐藏到小型设备的行中

Question

我有一个4行的容器，每行有4列8比例的两列。 对于每列，它适用于宽度超过1080px的屏幕，少于此内容重叠。

我想要做的是，使所有列变成具有整个屏幕宽度的行。

如果有人有任何建议可以获得更好的结果，请帮助我。 我发现很多问题对于有同样问题的人并尝试了他们的解决方案，但没有任何方法可以帮助我。

 .proctitleleft { font-size: 20px; position: absolute; left: 90px; top: 20px; bottom: 20px; } .procimageleft { position: relative; margin-bottom: 40px; margin-right: 90px; margin-top: 20px; } .procimageright { position: relative; margin-bottom: 40px; margin-left: 90px; } .procparagleft1 { position: absolute; left: 100px; top: 138px; font-size: 14px; } .procparagleft2 { position: absolute; left: 100px; top: 138px; font-size: 14px; } .procparagleft3 { position: absolute; left: 100px; top: 138px; font-size: 14px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="processcontainer"> <div class="arw_tab_title"> <div class="tab_title"> <h2 class="title">The Process</h2> <p class=""></p> </div> <div class="tab_sub_title"> <h2 class="title">our perfect process</h2> </div> </div> <div class="row"> <div class="col-xs-8"> <div class="proctitleleft"> <h3>1-Far far away</h3> </div> <div class="procparagleft1"> <p>It all started with a farmer and his extraordinary efforts to grow what people later called the best cotton in town <br>To Bangladesh we went to see if that was true.And it was!<br> </p> </div> </div> <div class="col-xs-4"> <div class="procimageleft"> <img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process1.png"> </div> </div> <div class="row"> <div class="col-xs-4"> <div class="procimageright"> <img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process2.png"> </div> </div> <div class="col-xs-8"> <div class="proctitleleft"> <h3>2-Lavish Studio left their mark </h3> </div> <div class="procparagleft2"> <p>Oh buddy! What can I say? <br>Working around the clock to deliver powerful yet very elegant designs that was approved by an internal community before seeing the light of day<br> </p> </div> </div> </div> <div class="row"> <div class="col-xs-8"> <div class="proctitleleft"> <h3>3-Complete the artwork</h3> </div> <div class="procparagleft3"> <p>Partnering up with the same factory that deal with Adidas, Reebok and Name, we were able to transform an idea into a very big powerful reality </p> </div> </div> <div class="col-xs-4"> <div class="procimageleft"> <img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process3.png"> </div> </div> </div> <div class="row"> <div class="col-xs-4"> <div class="procimageright"> <img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process4.png"> </div> </div> <div class="col-xs-8"> <div class="proctitleleft"> <h3>4- Quality meets perfection </h3> </div> <div class="procparagleft2"> <p>We stand by our products because we're confident in what we deliver. <br> That's why we designed an unsurpassed shopping and unboxing experience to befit such creations <br> </p> </div> </div> </div> </div> 

Answer 1

使用col-md-4和col-md-8而不是col-xs-*因此在992px宽度和492px以下的完整col宽度上有4：8的比例。 你不必自己做。 这是bootstrap的标准行为。

有关详细信息，请参阅https://getbootstrap.com/css/#grid-media-queries

Answer 2

使用三个类col-md-4，col-sm-4和col-xs-12，最后一个用于最小设备全宽div标签。