Reverse divs positions with responsive

Question

Reverse divs positions with responsive

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

.a-right {
    padding: 2%;
    float: right;
    width: 30%;
	margin: 0;
}

.a-center {
    padding: 2%;
    width: 50%;
	margin-left: 5%;
}


@media screen and (max-width: 600px){
	
    ul.topnav li.right, 
    ul.topnav li {float: none;}
    .a-center {width: 85%}
    .a-right {float: none; width: 95%}
    body{
        float: none;
    }
	
	#globo{
		width: 100%;
		margin-left: 0;
	}
	
	ul.topnav li a.active {margin-left: 0;}
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="UTF-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<link rel="stylesheet" href="_css/estilo.css"/>
</head>
<body>
<div class="a-right">
  <p>You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px or is a screen device in portrait mode:</p>
  
  <p>You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px or is a screen device in portrait mode:</p>
</div>

<div class="a-center">
    <p>You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px or is a screen device in portrait mode:</p>
  
  <p>You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px or is a screen device in portrait mode:</p>
</div>

How can I reverse the positions of the Divs when the site is accessed by the cell phone?

html css

asked by anonymous 05.10.2017 / 21:38

3 answers

Show User Logged in rails_admin dashboard Passing parameter to another Android activity

score 1 · Answer 1

Your CSS is perfect, just reverse the order of the DIVs, you will also need to add float: left; to the a-center and remove it in the media-query ( @media screen and (max-width: 600px) ):

.a-right {
    padding: 2%;
    float: right;
    width: 30%;
	margin: 0;
}

.a-center {
    padding: 2%;
    float: left;
    width: 50%;
	margin-left: 5%;
}


@media screen and (max-width: 600px){
	
    ul.topnav li.right, 
    ul.topnav li {float: none;}
    .a-center {float: none; width: 85%}
    .a-right {float: none; width: 95%}
    body{
        float: none;
    }
	
	#globo{
		width: 100%;
		margin-left: 0;
	}
	
	ul.topnav li a.active {margin-left: 0;}
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="UTF-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<link rel="stylesheet" href="_css/estilo.css"/>
</head>
<body>

<div class="a-center">
    <p>a-center</p>
    <p>You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px or is a screen device in portrait mode:</p>
  
  <p>You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px or is a screen device in portrait mode:</p>
</div>

<div class="a-right">
    <p>a-right</p>
  <p>You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px or is a screen device in portrait mode:</p>
  
  <p>You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px or is a screen device in portrait mode:</p>
</div>

score 0 · Answer 2

One way is to put divs within .container and apply display: table; . This way, you can reorder the position of divs within @media by setting what is above ( table-header-group; ) and what is below ( table-footer-group; or table-row-group; ):

HTML:

<div class='container'>
    <div class="a-right">
      <p>1. You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px or is a screen device in portrait mode:</p>

      <p>You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px or is a screen device in portrait mode:</p>
    </div>

    <div class="a-center">
        <p>2. You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px or is a screen device in portrait mode:</p>

      <p>You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px or is a screen device in portrait mode:</p>
    </div>
</div>

CSS:

.container {
   display:table;    
}
.a-right {
    display:table-footer-group;
}
.a-center {
    display:table-header-group;
}

.a-right {
    padding: 2%;
    float: right;
    width: 30%;
	margin: 0;
}

.a-center {
    padding: 2%;
    width: 50%;
	margin-left: 5%;
}


@media screen and (max-width: 600px){
	
    ul.topnav li.right, 
    ul.topnav li {float: none;}
    .a-center {width: 85%}
    .a-right {float: none; width: 95%}
    body{
        float: none;
    }
	
	#globo{
		width: 100%;
		margin-left: 0;
	}
	
	ul.topnav li a.active {margin-left: 0;}

	.container {
	   display:table;    
	}
	.a-right {
		display:table-footer-group;
	}
	.a-center {
		display:table-header-group;
	}
}

<div class='container'>
    <div class="a-right">
      <p>1. You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px or is a screen device in portrait mode:</p>
      
      <p>You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px or is a screen device in portrait mode:</p>
    </div>
    
    <div class="a-center">
        <p>2. You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px or is a screen device in portrait mode:</p>
      
      <p>You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px or is a screen device in portrait mode:</p>
    </div>
</div>

score 0 · Answer 3

An alternative is the order property of flexbox ...

.a-right {
  padding: 2%;
  width: 30%;
	margin: 0;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.a-center {
  padding: 2%;
  width: 50%;
	margin-left: 5%;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

@media screen and (max-width: 600px){
    .a-center {width: 85%; text-align: center}
    .a-right {width: 95%; text-align: center}
    body{
        float: none;
    }
    .ctn{
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
    }
    .a-right {
      -webkit-box-ordinal-group: 3;
          -ms-flex-order: 2;
              order: 2;
    }
    .a-center {
      -webkit-box-ordinal-group: 2;
          -ms-flex-order: 1;
              order: 1;
    }
}
.ctn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

<div class="ctn">
<div class="a-right">
  <p>texto....</p>
  
  <p>Order 1</p>
</div>

<div class="a-center">
    <p>Texto...</p>
  
  <p>Order 2</p>
</div>
</div>

See the browser support