2 Columns in Mobile Version

Hi,

You can use bootstrap for this
<div class=”container”>
<div class=”col-md-3 col-sm-6″>your image code here</div>
<div class=”col-md-3 col-sm-6″>your image code here</div>
<div class=”col-md-3 col-sm-6″>your image code here</div>
<div class=”col-md-3 col-sm-6″>your image code here</div>
</div>

Thankyou for reply.
Where should I add this code in WordPress if I want it on specific page below specific content?

First you have to confirm you have bootstrap with in your theme.
Then you can add it in page where you want to add

If you have not bootstrap you can use custom coding

<div class=”newadd”>
<div class=”newaddin″>your image code here</div>
<div class=”newaddin″>your image code here</div>
<div class=”newaddin″>your image code here</div>
<div class=”newaddin″>your image code here</div>
</div>

Add style in you style file:-

.newadd{float: left; width: 100%;}
.newaddin{float: left; width: 25%;}

@media only screen and (max-width: 767px) {

.newaddin{float: left; width: 50%;}

}
Try above code and let me know if it help.

Or please share your website link where you want to add code. so that i can check

• This reply was modified 4 years, 3 months ago by muktadhawan.

https://hastivora.online/home/trial/
Have a look at this
I want this image to get display side by side instead of one below the other

Try This

@media only screen and (max-width: 767px) {

.wp-block-columns {flex-wrap: nowrap;}

}

Now its displaying all in one line.I want just 2 @muktadhawan

Please try this

Replace your html:-
<div class=”wp-block-columns”>
<div class=”wp-block-column”>
<figure class=”wp-block-image size-large”>image code here</figure>
</div>
<div class=”wp-block-column”>
<figure class=”wp-block-image size-large”>image code here</figure>
</div>
<div class=”wp-block-column”>
<figure class=”wp-block-image size-large”>image code here</figure>
</div>
<div class=”wp-block-column”>
<figure class=”wp-block-image size-large”>image code here</figure>
</div>
</div>

<div class=”wp-block-columns”>
<div class=”wp-block-column”>
<figure class=”wp-block-image size-large”>image code here</figure>
</div>
<div class=”wp-block-column”>
<figure class=”wp-block-image size-large”>image code here</figure>
</div>
<div class=”wp-block-column”>
<figure class=”wp-block-image size-large”>image code here</figure>
</div>
<div class=”wp-block-column”>
<figure class=”wp-block-image size-large”>image code here</figure>
</div>
</div>

Add in css file:-

@media only screen and (max-width: 767px)

.wp-block-column {flex-basis: 50% !important;}

.wp-block-columns {flex-wrap: nowrap;}

}

• This reply was modified 4 years, 3 months ago by muktadhawan.

Nothing happened.
Just tell me how can I perform this
1) I need 4 columns that contains image
2) On mobile version only pair of column
should be visible one below the other.

By coding!

• This reply was modified 4 years, 3 months ago by vorahasti.

I have checked you did not add new code that i have sent you above. please try

I am still confused with where to put code. I am using storefront theme