https://apps.odoo.com/apps/modules/14.0/oh_website_product_display/

On Odoo15, In order to show two columns of products in the mobile view,

Go to Customize, Edit HTML/CSS/JS ,
From the dropdown menu XML(HTML), select SCSS (CSS)

then use this code and save (customize according to your needs):

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

#products_grid td{

        display: inline-table !important;

        width: 49% !important;

    }

#products_grid .table td {

    margin-top: 15px !important;

}

#products_grid .table td .o_wsale_product_grid_wrapper {

    min-height: 15rem;

}

}

Hi,

It's easy to achieve this by code.

When you look at the code of a snippet, you can see a div with a class row. 

Eg: 

<template id="s_image_text" name="Image - Text">
    <section class="s_text_image pt32 pb32">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 pt16 pb16">
<img src="/web/image/website.s_image_text_default_image" class="img img-fluid mx-auto" alt=""/>
                </div>
                <div class="col-lg-6 pt16 pb16">
                    <h2>Section Subtitle</h2>
                    <p>Write one or two paragraphs describing your product or services. To be successful your content needs to be useful to your readers.</p>
                    <p>Start with the customer – find out what they want and give it to them.</p>
                    <p><a href="#" class="btn btn-primary mb-2">Discover more</a></p>
                </div>
            </div>
        </div>
    </section>
</template>

This is the code of the Image text snippet. 

You need to remove the class row and add style display: flex to the same div. 

Eg: 

<template id="s_image_text" name="Image - Text">
    <section class="s_text_image pt32 pb32">
        <div class="container">
 <div class="align-items-center"

                    style="display:flex; gap: 10px;">
                <div class="col-lg-6 pt16 pb16">
<img src="/web/image/website.s_image_text_default_image" class="img img-fluid mx-auto" alt=""/>
                </div>
                <div class="col-lg-6 pt16 pb16">
                    <h2>Section Subtitle</h2>
                    <p>Write one or two paragraphs describing your product or services. To be successful your content needs to be useful to your readers.</p>
                    <p>Start with the customer – find out what they want and give it to them.</p>
                    <p><a href="#" class="btn btn-primary mb-2">Discover more</a></p>
                </div>
            </div>
        </div>
    </section>
</template>

Then you can view them as two columns.

Hope it helps

To display two columns on mobile devices in Odoo 14, you can follow these steps:

1. Identify the template or view where you want to display two columns on mobile devices.

2. Inside the template, wrap your content in a

   element with the class container-fluid to create a fluid container.

3. Divide the content into two columns using the Bootstrap grid system. For example, you can use

   elements with classes col-md-6 to specify that each column should take up half of the available space on medium-sized devices and larger. On smaller devices (including mobile devices), the columns will automatically stack vertically.

   div class="container-fluid">
   div class="row">
   div class="col-md-6">
   !-- Content for the first column -->
   /div>
   div class="col-md-6">
   !-- Content for the second column -->
   /div>
   /div>
   /div>
   

   1. Customize the content of each column as per your requirements. You can add any HTML elements, widgets, or Odoo components inside each column.

   2. Save the changes to your template and test the layout on a mobile device. The columns should stack vertically, displaying one column above the other.