Талян

img {
  display:block;
  width: 100%;
}

$("#mobile_menu_ul").css("display", $("#mobile_menu_ul").css("display") == "block" ? "none" : "block");

$("#mobile_menu_ul").toggleClass("mobile_menu_show");

.mobile_menu_show {
    display: block !important;
}

<script>
var list1=['1.jpg','2.jpg'];
var list2=['3.jpg','4.jpg'];
</script>

<button onclick="fillDiv(list1);">1,2</button><button onclick="fillDiv(list2);">3,4</button>
<div id="e4gallery"></div>

<script>


function fillDiv(list)
{
var imgDiv=document.getElementById("e4gallery");
imgDiv.innerHTML = '';
	list.forEach(function(item,i,list){
	var newDiv=document.createElement('div');
	newDiv.className='e4pictceClass';
	var image  = document.createElement('img');
	image.src=item;
	newDiv.append(image);
	
	imgDiv.append(newDiv);
	});
	
}
</script>

@media (max-width:768px)
{
.elementclass {
height: auto;
}
}

<div class="blocks">
  <div class="block block_red size25">1</div>
  <div class="block block_blue size55">2</div>
  <div class="block block_blue size45">3</div>
  <div class="block block_red size35">4</div>
</div>

.blocks {
  display: flex;
  flex-wrap: wrap;
}
.block {
  background: black;
  flex-basis: 50%;
}
.block_red {
  background: red;
}
.block_blue {
  background: blue;
}
.block:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.size25 {
font-size: 25px;
color: green;
}

.size35 {
font-size: 35px;
color: orange;
}

.size45 {
font-size: 45px;
color: pink;
}

.size55 {
font-size: 55px;
color: lime;
}