/    Sign up×
Community /Pin to ProfileBookmark

How to change Div element for Mobile without using bootstrap?

Copy linkTweet thisAlerts:
Jul 29.2019

Code :

“`
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html lang=”en”>
<head>
<title>Layout</title>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″>
<style type=”text/css”>
* {
padding: 0; margin: 0;
}
html {
height: 100.1&#37;;
}
#content1 {
float: left;
width: 25%;
background-color: #DDD;
}
#content2 {
float: left;
width: 25%;
background-color: #CCC;
}

#content3 {
float: left;
width: 25%;
background-color: #CCC;
}

#content4 {
float: left;
width: 25%;
background-color: #CCC;
}
</style>
</head>
<body>
<div id=”content1″>content 1</div>
<div id=”content2″>content 2</div>
<div id=”content3″>content 3</div>
<div id=”content4″>content 4</div>
</body>
</html>
“`

System view like,

**| Content 1 | content 2 | content 3 | content 4 |**

how to change the view in mobile like,

**| Content 1 | Content 2 |**

**| Content 3 | Content 4 |**

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumJul 29.2019 — This can be done easily by use of flex layout:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
&lt;title&gt;Layout&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"&gt;
&lt;style type="text/css"&gt;
* {
padding: 0;
margin: 0;
}

<i> </i> #content1 {
<i> </i> background-color: #DDD;
<i> </i> }

<i> </i> #content2 {
<i> </i> background-color: #CCC;
<i> </i> }

<i> </i> #content3 {
<i> </i> background-color: #CCC;
<i> </i> }

<i> </i> #content4 {
<i> </i> background-color: #CCC;
<i> </i> }

<i> </i> .container {
<i> </i> flex: 1;
<i> </i> display: flex;
<i> </i> }

<i> </i> .container&gt;div {
<i> </i> flex: 1;
<i> </i> }

<i> </i> body {
<i> </i> display: flex;
<i> </i> }

<i> </i> @media (max-width: 600px) {
<i> </i> body {
<i> </i> flex-direction: column;
<i> </i> }
<i> </i> }
<i> </i>&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div class="container"&gt;
&lt;div id="content1"&gt;content 1&lt;/div&gt;
&lt;div id="content2"&gt;content 2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="container"&gt;
&lt;div id="content3"&gt;content 3&lt;/div&gt;
&lt;div id="content4"&gt;content 4&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
×

Success!

Help @Aveeva7 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...