I have three columns 1 2 and 3 counted from left. When reduce viewport I want the 3 to be below the 1 and this to be under 2

3 replies [Last post]

Sun, 2014-11-09 22:42

Tojo

Offline

Regular

Last seen: 7 years 18 weeks ago

Timezone: GMT+1

Joined: 2011-10-21

Posts: 44

Points: 76

Here I have listed the html file and at the bottom the css file.
When I view this html file it display three columns.
The first one is far to the left is called menu and then the second is called left column which is in the middle and then finally the one to the right is called Right column.

If I now reduce the width of the screen it will display the menu at the top and then below the menu it will desplay the left column the then below the left column it will display the right column. Now it is displayed like this
Menu
Left column
Right column

Now I want instead to have the second column that is named Left column to be at the top and then below this I want to first column that is namned Menu and then below this I want to have the third column named the Right column.
It should like this
Left Column
Menu
Right column

I just wonder how should I change is the html code and css style sheet?

Responsive Three Column Layout

menu items here

Left Column (fluid)

Bacon ipsum dolor sit amet capicola ball tip beef ribs leberkas, turkey biltong salami shoulder ribeye. Leberkas chuck cow andouille kevin ribeye pork strip steak pork chop beef ribs beef ball tip corned beef. Leberkas prosciutto brisket, short ribs salami cow sirloin chicken. Bacon pork belly bresaola tenderloin biltong leberkas. Strip steak beef leberkas sirloin, venison turkey hamburger kevin. Drumstick chicken ground round t-bone flank fatback jerky ball tip. Jerky ribeye sirloin t-bone.

Tongue prosciutto pork ball tip ham hock, meatball sirloin brisket kielbasa biltong doner shoulder bresaola. Chuck beef ribs biltong, kielbasa ground round swine andouille corned beef. Venison hamburger tongue shank. Leberkas doner pork chop sausage kielbasa pancetta, biltong brisket pastrami tenderloin boudin filet mignon sirloin cow meatloaf. Ham ball tip bacon pork belly sirloin.

Shoulder pig short ribs, salami chicken venison bresaola. Frankfurter meatball pork chop pork loin, turkey strip steak kielbasa pork belly drumstick shank prosciutto. Pork chicken ground round, sirloin tri-tip ham hock pork chop cow meatloaf pork loin bresaola turkey. Prosciutto hamburger pork short ribs flank tri-tip chicken pig bacon meatloaf t-bone shankle doner. Bresaola doner spare ribs biltong jowl boudin, tri-tip pork leberkas ham hock filet mignon.

Leberkas strip steak shoulder meatball, flank biltong shank fatback ball tip swine prosciutto hamburger. Jerky frankfurter drumstick, ham ham hock hamburger kevin kielbasa salami chuck. Flank rump beef cow, beef ribs meatball ball tip jowl bacon pork chop. Biltong tongue pork chop hamburger. Frankfurter tri-tip pancetta pork chop venison t-bone andouille beef ribs salami boudin meatball doner spare ribs. Brisket pork chop pig kielbasa jerky chuck pork belly beef meatball boudin short loin. Doner jerky andouille ham meatloaf prosciutto kevin pork belly short loin pancetta.

Corned beef spare ribs hamburger pork tenderloin flank pork loin beef ribs sausage brisket chicken venison bacon short loin sirloin. Ribeye tail short ribs andouille kevin chicken shankle meatloaf, corned beef rump sirloin t-bone chuck tongue. Swine venison tongue, sirloin turducken drumstick bresaola strip steak rump. Kevin ham hock meatball tri-tip. Ground round leberkas pig beef salami strip steak meatball beef ribs. Chicken ball tip rump, short loin bresaola pork t-bone jerky jowl pork chop tail chuck sausage prosciutto.

Right Column

Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.

(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

ga('create', 'UA-621676-2', 'auto');
ga('send', 'pageview');

Here is the StyleSheet.css
**************************

*, *:before, *:after
{
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

body
{
margin: 0;
}

.columnsContainer, footer { position: relative; margin: .5em; }

.leftColumn, .rightColumn, .sideNav, footer { border: 1px solid #ccc; padding: 1.25em; }
.leftColumn, .sideNav { margin-bottom: .5em; }

@media screen and (min-width: 47.5em ) {
.leftColumn { margin-right: 19.5em; margin-left: 9.5em; }

.rightColumn { position: absolute; top: 0; right: 0; width: 18.75em; }

.sideNav { float: left; }
}

Tags:

Sun, 2014-11-09 22:49

Tojo

Offline

Regular

Last seen: 7 years 18 weeks ago

Timezone: GMT+1

Joined: 2011-10-21

Posts: 44

Points: 76

My html was not correct

My html was not correct displayed

Sun, 2014-11-09 22:53

Tojo

Offline

Regular

Last seen: 7 years 18 weeks ago

Timezone: GMT+1

Joined: 2011-10-21

Posts: 44

Points: 76

Here is the html

Here is the html file
**********************

<html><head>
		<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
    <title>Responsive Three Column Layout</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link rel="stylesheet" media="screen" href="StyleSheet.css">
 
    <!--[if lt IE 9]>
      <script src="js/respond.min.js"></script>
    <![endif]-->
 
  </head>
 
  <body>
  	<h1>Responsive Three Column Layout</h1>
 
  	<div class="columnsContainer">
 
      <div class="sideNav">
        <h2>Menu</h2>
 
        <p>menu items here</p>
      </div>
 
	  	<div class="leftColumn">
	  		<h2>Left Column (fluid)</h2>
 
	  		<p>Bacon ipsum dolor sit amet capicola ball tip beef ribs leberkas, turkey biltong salami shoulder ribeye. Leberkas chuck cow andouille kevin ribeye pork strip steak pork chop beef ribs beef ball tip corned beef. Leberkas prosciutto brisket, short ribs salami cow sirloin chicken. Bacon pork belly bresaola tenderloin biltong leberkas. Strip steak beef leberkas sirloin, venison turkey hamburger kevin. Drumstick chicken ground round t-bone flank fatback jerky ball tip. Jerky ribeye sirloin t-bone.</p>
 
				<p>Tongue prosciutto pork ball tip ham hock, meatball sirloin brisket kielbasa biltong doner shoulder bresaola. Chuck beef ribs biltong, kielbasa ground round swine andouille corned beef. Venison hamburger tongue shank. Leberkas doner pork chop sausage kielbasa pancetta, biltong brisket pastrami tenderloin boudin filet mignon sirloin cow meatloaf. Ham ball tip bacon pork belly sirloin.</p>
 
				<p>Shoulder pig short ribs, salami chicken venison bresaola. Frankfurter meatball pork chop pork loin, turkey strip steak kielbasa pork belly drumstick shank prosciutto. Pork chicken ground round, sirloin tri-tip ham hock pork chop cow meatloaf pork loin bresaola turkey. Prosciutto hamburger pork short ribs flank tri-tip chicken pig bacon meatloaf t-bone shankle doner. Bresaola doner spare ribs biltong jowl boudin, tri-tip pork leberkas ham hock filet mignon.</p>
 
				<p>Leberkas strip steak shoulder meatball, flank biltong shank fatback ball tip swine prosciutto hamburger. Jerky frankfurter drumstick, ham ham hock hamburger kevin kielbasa salami chuck. Flank rump beef cow, beef ribs meatball ball tip jowl bacon pork chop. Biltong tongue pork chop hamburger. Frankfurter tri-tip pancetta pork chop venison t-bone andouille beef ribs salami boudin meatball doner spare ribs. Brisket pork chop pig kielbasa jerky chuck pork belly beef meatball boudin short loin. Doner jerky andouille ham meatloaf prosciutto kevin pork belly short loin pancetta.</p>
 
				<p>Corned beef spare ribs hamburger pork tenderloin flank pork loin beef ribs sausage brisket chicken venison bacon short loin sirloin. Ribeye tail short ribs andouille kevin chicken shankle meatloaf, corned beef rump sirloin t-bone chuck tongue. Swine venison tongue, sirloin turducken drumstick bresaola strip steak rump. Kevin ham hock meatball tri-tip. Ground round leberkas pig beef salami strip steak meatball beef ribs. Chicken ball tip rump, short loin bresaola pork t-bone jerky jowl pork chop tail chuck sausage prosciutto.</p>
	  	</div>
 
	  	<div class="rightColumn">
	  		<h2>Right Column</h2>
 
	  		<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
	  	</div>
 
  	</div>
 
    <footer>
      <p><a href="#">Contact Us</a> | <a href="#">Sitemap</a> | <a href="#">Privacy Policy</a></p>
      <p>©2014 Copyright info here...</p>
    </footer>
 
<script async="" src="//www.google-analytics.com/analytics.js"></script><script>
                                                                            (function (i, s, o, g, r, a, m) {
                                                                                i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
                                                                                    (i[r].q = i[r].q || []).push(arguments)
                                                                                }, i[r].l = 1 * new Date(); a = s.createElement(o),
      m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
                                                                            })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
 
                                                                            ga('create', 'UA-621676-2', 'auto');
                                                                            ga('send', 'pageview');
    </script>
 
 
</body></html>

//Here is the css style sheet
*****************************

*, *:before, *:after 
{
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
 
body 
{ 
    margin: 0; 
}
 
.columnsContainer, footer { position: relative; margin: .5em; }
 
.leftColumn, .rightColumn, .sideNav, footer {  border: 1px solid  #ccc; padding: 1.25em;  }
.leftColumn, .sideNav { margin-bottom: .5em; }
 
 
@media screen and (min-width: 47.5em ) {
  .leftColumn { margin-right: 19.5em; margin-left: 9.5em;  }
 
  .rightColumn { position: absolute; top: 0; right: 0; width: 18.75em; }
 
  .sideNav { float: left; }
}

//mod edit: You forgot to use the bbcode tags [code] and [/code] to wrap your source. Fixed. ~gt

Mon, 2014-11-10 21:58

Tojo

Offline

Regular

Last seen: 7 years 18 weeks ago

Timezone: GMT+1

Joined: 2011-10-21

Posts: 44

Points: 76