Clever Geek Handbook

Show div when it matches col-md until it shows it when it matches col-sm

I want to display a specific image when a specific screen size is mapped. in this case for loading, I used col-xx - ## as my choice. But it doesn't seem to work the way I think it does.

The basic idea is if I want to show a full screen image of one view while showing another, if the screen size becomes small.

<div class="row">
  <img class="col-md-0 col-xs-12" src="img900x525.png">
  <img class="col-md-12 col-xs-0" src="img300x300.png">
</div>

thank

+3


source to share


2 answers


Start with a smaller image:

.col-xs-0 {
  display: inline;
}

.col-xs-12 {
  display: none;
}

then on larger screens display the larger version instead:



@media only screen and (min-width:70em) { 
  .col-xs-0 {
    display: none;
  }

  .col-xs-12 {
    display: inline;
  }
}

(adjust the minimum width according to your need)

+2


source


Bootstrap supports the use of a hidden class, but you need to hide it for any viewports that you don't want to show.



<div class="row">
  <img class="col-xs-12 hidden-md " src="img900x525.png">
  <img class="hidden-xs col-md-12 " src="img300x300.png">
</div>
+12


source






More articles:


All Articles