Responsive columns

Hi,

With the help of the Advanced WP Columns plugin, I’ve managed to make 2 columns with images responsive. However, it moves the column on the right over to the left too soon, and I don’t know which parameters to adjust to fix it. It should still show the 2 columns in the landscape view of a tablet, as a 2×2 grid.

Here’s the code. Your help is much appreciated!

<div class=”csRow”>
<div class=”csColumnGap” style=”margin: 0px; padding: 0px; float: left; width: 21%;”><img src=”https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1×1-pixel.png&#8221; alt=”” /></div>
<div class=”csColumn” style=”margin: 0px; padding: 0px; float: left; width: 26.1%;” data-csid=”44e6e8f3-d11c-bcf8-b30c-dc58ab4e3ae4″ data-cswidth=”26.1%” data-csendpoint=”452.5″ data-csstartpoint=”202″></div>
<div class=”csColumnGap” style=”margin: 0px; padding: 0px; float: left; width: 5.73%;”><img src=”https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1×1-pixel.png&#8221; alt=”” /></div>
<div class=”csColumn” style=”margin: 0px; padding: 0px; float: left; width: 26%;” data-csid=”b704cad3-018d-58ca-ac90-712a2a680968″ data-cswidth=”26.0%” data-csendpoint=”757″ data-csstartpoint=”507.5″></div>
<div class=”csColumnGap” style=”margin: 0px; padding: 0px; float: left; width: 21.1%;”><img src=”https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1×1-pixel.png&#8221; alt=”” /></div>
<div class=”csRow”>
<div class=”csColumnGap” style=”margin: 0px; padding: 0px; float: left; width: 1.56%;”><img src=”https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1×1-pixel.png&#8221; alt=”” /></div>
<div class=”csColumn” style=”margin: 0px; padding: 0px; float: left; width: 47.7%;” data-csid=”30a26e8b-c55f-1603-af6d-f1e4781ed3a7″ data-cswidth=”47.7%” data-csendpoint=”472.5″ data-csstartpoint=”15″> <img class=”alignnone size-full wp-image-18″ src=”https://test.kasperlangejan.nl/wp-content/uploads/2016/04/polaroid44.png&#8221; alt=”polaroid44″ width=”227″ height=”290″ /></div>
<div class=”csColumn” style=”margin: 0px; padding: 0px; float: left; width: 47.7%;” data-csid=”30a26e8b-c55f-1603-af6d-f1e4781ed3a7″ data-cswidth=”47.7%” data-csendpoint=”472.5″ data-csstartpoint=”15″></div>
<div class=”csColumnGap” style=”margin: 0px; padding: 0px; float: left; width: 1.56%;”><img src=”https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1×1-pixel.png&#8221; alt=”” /></div>
<div class=”csColumn” style=”margin: 0px; padding: 0px; float: left; width: 47.7%;” data-csid=”6491ec8a-3599-73e5-ac2e-83f5cd448d45″ data-cswidth=”47.7%” data-csendpoint=”945″ data-csstartpoint=”487.5″><img class=”alignnone size-full wp-image-19″ src=”https://test.kasperlangejan.nl/wp-content/uploads/2016/04/polaroid2.jpg&#8221; alt=”polaroid2″ width=”224″ height=”287″ /></div>
<div class=”csColumnGap” style=”margin: 0px; padding: 0px; float: left; width: 1.56%;”><img src=”https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1×1-pixel.png&#8221; alt=”” /></div>
<div class=”csRow”>
<div class=”csColumnGap” style=”margin: 0px; padding: 0px; float: left; width: 21%;”><img src=”https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1×1-pixel.png&#8221; alt=”” /></div>
<div class=”csColumn” style=”margin: 0px; padding: 0px; float: left; width: 26.1%;” data-csid=”44e6e8f3-d11c-bcf8-b30c-dc58ab4e3ae4″ data-cswidth=”26.1%” data-csendpoint=”452.5″ data-csstartpoint=”202″></div>
<div class=”csColumnGap” style=”margin: 0px; padding: 0px; float: left; width: 5.73%;”><img src=”https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1×1-pixel.png&#8221; alt=”” /></div>
<div class=”csColumn” style=”margin: 0px; padding: 0px; float: left; width: 26%;” data-csid=”b704cad3-018d-58ca-ac90-712a2a680968″ data-cswidth=”26.0%” data-csendpoint=”757″ data-csstartpoint=”507.5″></div>
<div class=”csColumnGap” style=”margin: 0px; padding: 0px; float: left; width: 21.1%;”><img src=”https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1×1-pixel.png&#8221; alt=”” /></div>
<div class=”csRow”>
<div class=”csColumnGap” style=”margin: 0px; padding: 0px; float: left; width: 1.56%;”><img src=”https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1×1-pixel.png&#8221; alt=”” /></div>
<div class=”csColumn” style=”margin: 0px; padding: 0px; float: left; width: 47.7%;” data-csid=”30a26e8b-c55f-1603-af6d-f1e4781ed3a7″ data-cswidth=”47.7%” data-csendpoint=”472.5″ data-csstartpoint=”15″><img class=”alignnone size-full wp-image-22″ src=”https://test.kasperlangejan.nl/wp-content/uploads/2016/04/polaroid3.jpg&#8221; alt=”polaroid3″ width=”224″ height=”287″ /></div>
<div class=”csColumnGap” style=”margin: 0px; padding: 0px; float: left; width: 1.56%;”><img src=”https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1×1-pixel.png&#8221; alt=”” /></div>
<div class=”csColumn” style=”margin: 0px; padding: 0px; float: left; width: 47.7%;” data-csid=”6491ec8a-3599-73e5-ac2e-83f5cd448d45″ data-cswidth=”47.7%” data-csendpoint=”945″ data-csstartpoint=”487.5″><img class=”alignnone size-full wp-image-24″ src=”https://test.kasperlangejan.nl/wp-content/uploads/2016/04/polaroid1.jpg&#8221; alt=”polaroid1″ width=”224″ height=”287″ /></div>
<div class=”csColumnGap” style=”margin: 0px; padding: 0px; float: left; width: 1.56%;”><img src=”https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1×1-pixel.png&#8221; alt=”” /></div>
<div style=”clear: both; float: none; display: block; visibility: hidden; width: 0px; font-size: 0px; line-height: 0;”></div>
</div>
</div>
</div>
</div>