0

Suppose that I've desktop view of a list of products displayed like in the image below ?

enter image description here

However, the mobile view doesn't have the purchase buttons on the side. enter image description here

Is there a way to part these into columns where the column containing the purchase buttons can be hidden for small screens ?

I've tried adding col-sm-0 col-md-4 for the side buttons column, but it didn't work. the columns stack over each other on small screens.

Esam Olwan
  • 320
  • 1
  • 5
  • 16
  • Please share your Html code – Rakesh K Aug 28 '21 at 17:15
  • 1
    Does this answer your question? [how to hide one column from grid in bootstrap mobile version](https://stackoverflow.com/questions/35077631/how-to-hide-one-column-from-grid-in-bootstrap-mobile-version) – Ouroborus Aug 28 '21 at 17:18

1 Answers1

0

you can use

`col-sm-12`

for example

<div class="left col-sm-12 col-md-8">....</div>
<div class="right col-sm-12 col-md-4">....</div>

in each column, so that if the screen shrinks each column will create 1 screen block, and the other components drop down

ryandi pratama purba
  • 384
  • 1
  • 7