Invert Divs positions with responsive

Asked

Viewed 1,111 times

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>

There is how I reverse the positions of Divs when the site is accessed by mobile?

html css

  • Left to right or right to play down?

  • like, the way it is, it’s a div on the left, and the other on the right, when I enter by cell phone in it, it’s one below the other, in the order <div class="a-right"> and below <div class="a-center"> stood on top of the "a-right". Sorry, I really wasn’t clear..

  • If reversing the orders and applying float to a-center should work, please test this: https://answall.com/a/243714/3635

3 answers

1

Your CSS is perfect, just reverse the order of Divs, you will also need to add float: left; for a-center and remove it in 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>

  • 1

    It was right buddy, but there is a though, I have a footer down there, and as the two Divs are floating, my footer got messy between them, you know how I solve?

  • I managed to, thank you very much!

  • @Fabio Did my answer work? If yes could mark as correct?

0

One way is to put the divs within a .container and applying display: table;. This way you can reorder the position of divs within the @media defining what is on top (table-header-group;) and what’s underneath (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>

0

An alternative is property order 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

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.