# Media query understanding and Bootstrap 4 with PInegrow

**URL:** <https://forum.pinegrow.com/t/media-query-understanding-and-bootstrap-4-with-pinegrow/2438>\
**Category:** Pinegrow PRO\
**Created:** [November 24, 2018, 12:25pm UTC](https://forum.pinegrow.com/t/media-query-understanding-and-bootstrap-4-with-pinegrow/2438 "2018-11-24T12:25:48Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bennyboy](https://avatars.discourse-cdn.com/v4/letter/b/57b2e6/32.png) [@Bennyboy](https://forum.pinegrow.com/u/Bennyboy)\
**Post date:** [November 24, 2018, 12:25pm UTC](https://forum.pinegrow.com/t/media-query-understanding-and-bootstrap-4-with-pinegrow/2438/1 "2018-11-24T12:25:48Z")

</div>

Hello,

I am a bit confused with Pinegrow and Bootstrap 4 when it comes to hiding a column where the mobile reaches a certain size while increasing the adjacent column width.

Here is a code example of what I mean:

Here is what I have:

```auto
<div class="container">
  <div class="row">
    <div class="col-md-2">
      column of 2
    </div>
    <div class="col-md-8">
      column of 8
    </div>
    <div class="col-md-2">
      column of 2
    </div>
  </div>
</div>

```

When the mobile size is md, sm or xs, I would like the first column of 2 to hide and the adjacent column of 8 to become 10 for all the devices that start on lg like this:

```auto
<div class="container">
  <div class="row">
    <div class="col-md-10">
    column of 10
    </div>
    <div class="col-md-2">
      column of 2
    </div>
  </div>
</div>

```

I tried to use the media query and can manage to hide the column when the screen size is below 992(md) but what I cannot manage to do is tell PInegrow to resize the column of 8 to 10 when reaching the lg size.

Any idea how to do this with Pinegrow and bootstrap 4, please?

Thanks.

---

<div class="post-metadata">

**Author:** ![Bennyboy](https://avatars.discourse-cdn.com/v4/letter/b/57b2e6/32.png) [@Bennyboy](https://forum.pinegrow.com/u/Bennyboy)\
**Post date:** [November 24, 2018, 2:03pm UTC](https://forum.pinegrow.com/t/media-query-understanding-and-bootstrap-4-with-pinegrow/2438/2 "2018-11-24T14:03:52Z")

</div>

OK I worked it out, you need to use the xs,sm,md and lg settings in the layout area.

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [November 24, 2018, 2:04pm UTC](https://forum.pinegrow.com/t/media-query-understanding-and-bootstrap-4-with-pinegrow/2438/3 "2018-11-24T14:04:48Z")

</div>

Well done @Bennybo ! 🙂

could you also post the resulting code or screen capture of what you did for others as you wont be alone in this quest - er, while you still remember how to do it 🙂

---

<div class="post-metadata">

**Author:** ![dcneuts](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/dcneuts/32/1173_2.png) [@dcneuts](https://forum.pinegrow.com/u/dcneuts)\
**Post date:** [April 11, 2019, 5:48am UTC](https://forum.pinegrow.com/t/media-query-understanding-and-bootstrap-4-with-pinegrow/2438/4 "2019-04-11T05:48:48Z")

</div>

I didn’t see a response, but I believe he’s discovered that he can stack classes:

`<div class="col-md-8 col-lg-10">`

However, if something needed to go away, you could modify it by attaching another class or ID and then targeting it:

`<div class="col-md-8 col-lg-10 smallHide">`

and then target `div.smallHide` with something similar to:

`@media (min-width: 768px) {div.smallHide {display: none;}}`

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [April 12, 2019, 1:12am UTC](https://forum.pinegrow.com/t/media-query-understanding-and-bootstrap-4-with-pinegrow/2438/5 "2019-04-12T01:12:27Z")

</div>

oh, _Stack Classes_ ok I will look that up. not aware of that.  
Cheers @dcneuts