当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Bootstrap grid - change the order in mobile

问题描述:

I have bootstrap row with four .col-md-6 divs. So normal screens shows as two sections like this.

When you are switched to mobile, it change it's order to a single column( shows 4 divs under the each div). I have used two colors for divs. First div has a white background color and second div has a black background color like that. Let's see how it looks like on mobile. The first row second div has a black background and the second row first div has a black background so it's showing two black background color div merged way! How can I fix this or is there any available boostrap's pull push methods for doing things like this?

网友答案:

You can use Bootstrap's Column Re-Ordering classes to achieve this as follows:

body {
  background: #ccc;
}

.white,
.black {
  height: 200px;
}

.white {
  background: white;
}

.black {
  background: black;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-6 white"></div>
  <div class="col-sm-6 black"></div>
  <div class="col-sm-6 col-sm-push-6 white"></div>
  <div class="col-sm-6 col-sm-pull-6 black"></div>
</div>
网友答案:

You can also try using media query..

.div-1,.div-4 {
   background-color: white;
   color: black;
}

.div-2,.div-3 {
  background-color: black;
  color: white;
}

@media screen and (max-width: 768px) {
   .div-1,.div-3 {
     background-color: white;
     color: black;
 }
 .div-2,.div-4 {
    background-color: black;
    color: white;
 }
}
div {
   height: 150px;
}

Working code: https://jsfiddle.net/pranjalp34/x2w38hje/

网友答案:

If you would like to keep the order of the .col-md-6 divs the same

(ie. Software Development, Web Solutions, Hardware Solutions, Network Solutions)

check to see if you have something like the following:

.software-development,
.network-solutions {
color: rgb(0,0,0); /* or #000000 or #000 */
background-color: rgb(255,255,255); /* or #ffffff or #fff */
}

.web-solutions,
.hardware-solutions {
color: rgb(255,255,255); /* or #ffffff or #fff */
background-color: rgb(0,0,0); /* or #000000 or #000 */
}

If you have, then simply swap the color and background-color styles of .hardware-solutions and .network-solutions in the @media queries for mobile.

分享给朋友:
您可能感兴趣的文章:
随机阅读: