How can I change div's position when resizing?

Question

I have a problem, all I want to do is at a certain width (using the @media) I want to change my left div to the right side under the one that is already there. I tried everything, including changing the display, positioning using left margin but due to the parent container it doesn't work. The only thing that I thought about is to make the same left div on the right side and to make the display to none, but I am pretty sure that's not the way to deal with it. I use Bootstrap 4.

This is the HTML:

.main{
		background-color: #aaa;
		box-shadow: 3px 3px 20px #000000;
		border-radius: 20px;
		margin-left: 20px;
		margin-right: 20px
	}
	
	.left{
		background-color: #aaa;
		max-width: 200px;
		height: 1%;
		border-radius: 20px;
	}
	
	.right{
		background-color: #aaa;
		max-width: 200px;
		height: 1%;
		border-radius: 20px;	
	}	

	.right-content{
		width: 100%;
		text-align: center;
		float: center;
		margin-top: 10px;
	}
	
	.parent-container {
		display: flex;
	}

    <div class="parent-container">
       <div class="container left">
           <div class="row">
               Left content
           </div>
       </div>
	
	    <div class="container card main py-3">
		    <div class="container card">
		    	<div class="card-body">
			    	<div class="row">
				    	<div class="col-lg-12 text-center">
					    	<h2>TITLE2</h2>
				    	</div>
				    </div>
				<div class="row">
					<div class="col-md-12 text-center">
						<a href="#" class="link1">
                          <img src="2.jpg">
							<h3>Title3</h3>
						</a>
					</div>
				</div>
			</div>
		</div>

        <div class="container right">
		    <div class="row">
			    <div class="right-content">
                   Right content here
			    </div>
           </div>		
       </div>
    </div>

Answer 1

To achieve the effect you want, you need to use Bootstrap 4 order-* classes. order-last in the code snippet below re-orders the column to come last by default but the order-md-first makes the column appear first on screens that are medium (md) or larger.

There are other ways of using the order classes to achieve the same result. This is just one of the possible options.

But there are many other and fundamental mistakes in your code. Here are a few pointers:

• Do NOT nest containers inside other containers. Nest row-column pairs inside columns instead

• Do NOT put any content directly into a .row. Bootstrap rows aren't designed for that. Put one or more columns (.col-*) into a row and put all your content inside that column(s).

• Bootstrap 4 is flexbox-based by default and has classes to do almost everything you'll ever need in terms of positioning and spacing. Use those native Bootstrap classes instead of unnecessary custom css hacks.

Here's a working code snippet (click the "run code snippet" button below and expand to full page):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-md-3 col-xl-2 bg-light order-last order-md-first py-3">
            Left div content <br>
            Left div content <br>
            Left div content <br>
        </div>
        <div class="col-12 col-md-9 col-xl-10 bg-primary py-3">
            <div class="card py-3">
                <div class="card-body">
                    <div class="row">
                        <div class="col text-center">
                            <h2>Right div TITLE</h2>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col text-center">
                            <a href="#">
                                <img class="img-fluid" src="https://placeimg.com/888/88/tech">
                                <h3>Right div subtitle</h3>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col text-center">
                        Right div content here
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Notice: That code doesn't contain any of your custom css. If you want to add some custom css to that, start adding it line by line to see where your custom css breaks Bootstrap.

Also, the background classes bg-light and bg-primary in the code snippet above are just for making things easier to see.