Two Images (Columns) Side-by-Side on Computer and on Top-of-Each-Other on Mobile

[LouisDublois]

Hello, 

I am using a custom theme. I have two images side-by-side on a computer device. And I would like these two images to be on top-of-each-other on a mobile device (for now they are side-by-side on mobile). 

It is in the home section of my website. I am using a <div class="wrapper"> and a <div class="row"> in which there are two <div class="col">, one of each image. 

I have tried to put :

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

.row { flex-direction: column;}

} 

, but when I do that I have only one image on mobile device : the first one disappears. 

Do you have any idea how I can do what I want to do ?

Thanks in advance, 

Louis

The code of the home section is the following: 

<style>
  #wrap2{
    margin-left: 0px;
  }

  @media screen and (max-width: 749px) {
/*  .wrap {
    width: 100%;
    flex-wrap: wrap;
  }
  .row {
    display:flex;
    flex-wrap: wrap;
    flex-direction: column;
  } 
*/
  }
  
</style>

<section class="section section-home">
  <div class="wrapper">
        <div class="row">
            <div class= "col">
              <div class="small--one-whole">
                <div class="wrap wrap-left">
                    {% for block in section.blocks %}
                        {% if forloop.first == true %}
                            <a href="{{ block.settings.link }}">
                            <img src="{{ block.settings.image | img_url: '1500x1500' }}" class="img-cover" alt="{{ block.settings.cta_label }}">
                            </a>
                        {% endif %}
                    {% endfor %}
                </div>
              </div>
            </div>
            <div class="col">
              <div class="small--one-whole">
                <div class="wrap wrap-right" id="wrap2">
                    {% for block in section.blocks %}
                        {% if forloop.last == true %}
                            <a href="{{ block.settings.link }}">
                            <img src="{{ block.settings.image | img_url: '1500x1500' }}" class="img-cover" alt="{{ block.settings.cta_label }}">
                            </a>
                        {% endif %}
                    {% endfor %}
                </div>
              </div>
            </div>
        </div>

        <div class="text-container text-scroll">
            <div class="wrapper">
                <div class="text">
                    {{ section.settings.banner }} {{ section.settings.banner }}
                </div>
            </div>
        </div>

  </div>
</section>



{% schema %}
{
    "name": {
        "fr": "Section principale",
        "en": "Main section"
    },
    "settings": [
      {
        "id": "banner",
        "type": "text",
        "label": "Texte",
        "default": "Hello world"
      }
    ],
    "blocks": [
    {
      "type": "image",
      "name": {
        "fr": "Image",
        "en": "Image"
      },
      "settings": [
        {
          "type": "text",
          "id": "cta_label",
          "label": {
            "fr": "Titre",
            "en": "Title"
          }
        },
        {
           "type": "color",
           "id": "default_color",
           "label": "Color default",
           "default": "#000"
         },
        {
          "type": "url",
          "id": "link",
          "label": {
            "fr": "Lien",
            "en": "Link"
          },
          "info": {
            "fr": "Facultatif",
            "en": "Optionnal"
          }
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": {
            "fr": "Image",
            "en": "Image"
          }
        }
      ]
    }
  ]
}
{% endschema %}

[Guleria]

@LouisDublois  Please share the store URL. 

[LouisDublois]

https://www.fingerinthenose.com/