Hello everyone, there are three blocks. On the large and medium screen, the blocks are located on the same line, on the small one I want 1, 2 blocks on one line, and 3 - in the center. Added col-sm-6 col-sm-offset-3 to the class (everything is fine), but on the big and middle screen the blocks break. How to do everything correctly?
.container { background-color: lightblue; } .flex-container { font-family: "Gochi Hand", "Trirong", serif; display: flex; align-items: center; height: 1600px; } .block-1 { padding-left: 20px; padding-top: 200px; color: white; background-image: url("https://lh3.googleusercontent.com/-RQQS6WqpT8s/WBJNCBcJfbI/AAAAAAAAJYw/5zGBbZdrN6g5sq4VhcXMxEVlNGZVLys8gCL0B/w530-h398-p-rw/working%2Bman%2B%25231%2B%25281%2Bof%2B1%2529.jpg"); background-size: cover; height: 500px; } .block-1 h1 { width: 100px; } .block-2 { font-family: "Trirog", serif; background-color: #f2f2f2; border: 1px solid black; height: 500px; } .block-2 span { font-size: 1.5em; position: relative; top: 10px; margin-left: 10px; } .fl-1 { margin-left: 2%; } .fl-1:first-letter { float: left; font-family: "Trirong", serif; color: black; font-size: 4em; ; font-weight: bold; } .fl-2 { position: relative; buttom: 20px; } .block-3 { font-family: "Times New Roman"; background-color: #f2f2f2; height: 540px; } .block-3 .text-center { font-weight: bold; font-size: 1.5em. } .close { background-color: white; display: flex; align-items: center; width: 100%; border: 1px solid black; height: 40px; padding-left: 20px; } .close .btn { font-size: 15px; width: 100px; color: black; } ul { list-style: none; } .block-3 .post-1:before { width: 100px; height: 100px; background-color: red; content: " "; background-image: url('https://pp.vk.me/c626522/v626522683/330be/mYfyjq85g_o.jpg'); } .post { display: block; position: relative; top: 30px; } .post:before { content: " "; border-radius: 50px; display: block; float: left; background: url(https://pp.vk.me/c623318/v623318572/44179/25Zbq1K2Dpw.jpg); display: block; height: 40px; width: 40px; background-size: cover; margin-right: 15px; margin-left: 15px; } .post .text-muted { position: relative; left: 20px; } <html> <head> <meta charset="UTF-8" /> <title>first page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Gochi+Hand|Trirong" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div class="container flex-container"> <div class="row"> <!-- first block --> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"> <div class="block-1"> <p class="text-left small">MARK MANSON</p> <h1 class="text-left">The darkside of the digital normad</h1> <a href="#" class="btn btn-default btn-sm" role="button">Travel</a> </div> <div class="close"> <a class="btn btn-info btn-sm" href="#" role="button">close</a> </div> </div> <!--second block--> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"> <div class="block-2"> <p class="fl-1"> T<span>he acknowledgement that something came from another source. The following sentence properly attributes an idea to its original author: Jack Bauer, in his article "Twenty-Four Reasons not to Plagiarize," maintains that cases of plagiarists being expelled by academic institutions have risen dramatically in recent years due to an increasing awareness on the part of educators. </span> </p> </div> <div class="close"> <a class="btn btn-info btn-sm" href="#" role="button">close</a> </div> </div> <!--third block--> <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-lg-4"> <div class="block-3"> <p class="text-center">comments(45)</p> <div class="post text-center"> <p>comment<span class="text-muted">3 hours ago</span> </p> <p>Hello, World! My name is Jane</p> <div class="post"> <p>comment<span class="text-muted">3 hours ago</span> </p> <p>Hello, World! My name is Jane</p> <div class="post"> <p>comment<span class="text-muted">3 hours ago</span> </p> <p>Hello, World! My name is Jane</p> </div> </div> </div> </div> </div> </body> </html> <html> <head> <meta charset="UTF-8" /> <title>first page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Gochi+Hand|Trirong" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div class="container flex-container"> <div class="row"> <!-- first block --> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"> <div class="block-1"> <p class="text-left small">MARK MANSON</p> <h1 class="text-left">The darkside of the digital normad</h1> <a href="#" class="btn btn-default btn-sm" role="button">Travel</a> </div> <div class="close"> <a class="btn btn-info btn-sm" href="#" role="button">close</a> </div> </div> <!--second block--> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"> <div class="block-2"> <p class="fl-1"> T<span>he acknowledgement that something came from another source. The following sentence properly attributes an idea to its original author: Jack Bauer, in his article "Twenty-Four Reasons not to Plagiarize," maintains that cases of plagiarists being expelled by academic institutions have risen dramatically in recent years due to an increasing awareness on the part of educators. </span> </p> </div> <div class="close"> <a class="btn btn-info btn-sm" href="#" role="button">close</a> </div> </div> <!--third block--> <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-lg-4"> <div class="block-3"> <p class="text-center">comments(45)</p> <div class="post text-center"> <p>comment<span class="text-muted">3 hours ago</span> </p> <p>Hello, World! My name is Jane</p> <div class="post"> <p>comment<span class="text-muted">3 hours ago</span> </p> <p>Hello, World! My name is Jane</p> <div class="post"> <p>comment<span class="text-muted">3 hours ago</span> </p> <p>Hello, World! My name is Jane</p> </div> </div> </div> </div> </div> </body> </html> 
