如何使用 css 将 bootstrap class col-md-10 更改为 div 的 col-md-12

Question

I used thumbnail section and view section in my project. So I divided parent div into two div, first is col-md-3 (that is thumbnail div) and second is col-md-9 (that is view section). Now I want to hide first div and change second div into col-md-12 for small device like mobile or ipad.

Is there any way to make it with media query?

Answer 1

Bootstrap col system for grid has this built in. When you specify col-md-3 you are saying "at medium screen give this col 3 blocks". You can also do, side by side col-sm-12 to give it the entire row when on large screen and col-sm-0 to hide it when on smaller screens. Look here for a better explanation about bootstrap grid system: https://getbootstrap.com/docs/4.1/layout/grid/

Answer 2

<div class="row">
  <div class="col-md-3 d-none d-sm-none d-md-block">THUMBNAIL</div>
  <div class="col-md-9">Some data</div>
</div>

This will solve your issue. For extra small and small screen thumbnail will not appear.