<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.hidden {
display: none;
}
</style>
<script>
window.onload = function () {
var foo = document.querySelector(".shedule-items");
var message = foo.innerHTML;
var oops = document.querySelector(".oops");
if(message) {
oops.classList.toggle("hidden");
}
}
</script>
</head>
<body>
<div class="shedule-items"></div>
<div class="oops">oops!</div>
</body>
</html><script>
$(document).ready(function() {
var foo = $(".shedule-items");
var message = foo.html();
var oops = $(".oops");
if(message) {
oops.toggleClass("hidden");
}
});
</script><img src="small.jpg"
srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
sizes="100vw"
alt="" />img {
width: 100%;
max-width: 100%;
height: auto;
}@media screen and (max-width: 800px) {
.main {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item {
display: inline-flex;
}
.item1, .item5 {
width: calc(50% - 50px);
}
.item2, .item4 {
width: calc(50% - 25px);
}
.item1 {
order: 1;
}
.item2 {
order: 4;
}
.item3 {
order: 2;
width: 100px;
}
.item4 {
order: 6;
}
.item5 {
order: 3;
}
.item6 {
order: 5;
width: 50px;
}
}<div class="main">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
</div>