JSFiddle - React, Tailwind, and code Playground

Responsive, move div

by Bianca Kuehweidner

HTML

<div id="wrapper">

        <div id="content">

            <!-- Row 1 -->
            <article class="sm" id="pic1">
                &nbsp;
            </article>

            <article class="xl" id="pic2">
                &nbsp;
            </article>

                        
            <!-- Row 2 -->
            <article class="sm" id="pic3">
                &nbsp;
            </article>

            <article class="std" id="pic4">
                &nbsp;
            </article>

            <article class="std" id="pic5">
                &nbsp;
            </article>


            <!-- Row 3 -->
            <article class="sm">
                &nbsp;
            </article>

            <article class="std" id="pic7">
                &nbsp;
            </article>

            <article class="std" id="pic8">
                &nbsp;
            </article>

        </div>
        
    </div>

CSS

body {
    font: normal 16px arial;
    margin: 0;
    padding: 0;
}


aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}


#wrapper {
	width: 1200px;
	margin: 0 auto;
}

#content {
	width: 1088px;
	float: left;
    padding: 5px;
    border: solid 1px #ccc;
}

img {    
	max-width: 100%;
    max-height: 100%;    
    width: auto;
	height: auto;
}


article { 
    display: inline-block;
    float: left;
    margin: 0;
    padding: 0;
    background-color: orange;
}
    article.sm {
        width: 24.6%;
    }
    article.std {
        width: 37.7%;
    }
    article.xl {
        width: 75.4%;
    }
    #pic4 { 
        background-color: lime; 
    }


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

	#wrapper {
		width: 98%;
	}

	#content {
		width: 90%;
		padding: 0;
	}
           
}


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

	#content {
		width: auto;
		float: none;
		margin: 20px 0;
	}
        
}


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

	html {
		-webkit-text-size-adjust: none;
	}

    article { 
        
        display: block;
        float: left;
        clear: both;
    }
        article.sm,
        article.std,
        article.xl {
            width: 100%;
        }

    article#pic4 {
        position: relative;
        top: 0;
        height: auto;
        clear: both;
    }

    img {    
	    max-width: 100%;    
        width: 100%;
    }

}