bootstrap col resize next to each other when smaller screen - html

Question

I am trying to make a responsive web-layout like :
Upon resizing I would want the skills to be next to one another underneath the intro:
The problem is mainly at the intro and skill boxes, I can't seem to get them to adjust the way I want: https://jsfiddle.net/aq9Laaew/20858/
HTML:
<div class="container">
<div class="row">
<div class="col text-center">HEAD</div>
</div>
<div class="row">
<div class="col">
INTRO
</div>
<div class="col p-0">
<div class="col m-0">SKILLS</div>
<div class="col m-0">SKILLS</div>
<div class="col m-0">SKILLS</div>
</div>
</div>
<div class="row">
<div class="col">
EDUCATION
</div>
<div class="col">
EXPERIENCE
</div>
</div>
<div class="row">
<div class="col">OTHER</div>
</div>
</div>
CSS:
.row {
background: #f8f9fa;
margin:10px;
}
.col {
border: solid 1px #6c757d;
margin: 10px;
}
.row, .col {
min-width: 120px;
}
They keep setting underneath each other which i only want when the screen is extra small. this is simple but i just cant figure it out...
I tried adding col-4 for intro (since intro should expand wider than skill) and messed with the columns more on the skill box to no luck..

Answer 1

There are a few issues that are preventing you from getting the desired layout:
cols must be the immediate child of a row ... the skills need to be wrapped in another row.
Use col-sm to allow columns to stack vertically on the smaller layout.
Don't adjust margins on the rows or cols as it will break the way the grid works.
Working demo: https://www.codeply.com/go/0g48AjUW4E
<div class="container">
<div class="row">
<div class="col p-0 text-center">HEAD</div>
</div>
<div class="row">
<div class="col-sm p-0">
INTRO
</div>
<div class="col-md-auto p-0">
<div class="row no-gutters">
<div class="col col-sm col-md-12">SKILLS</div>
<div class="col col-sm col-md-12">SKILLS</div>
<div class="col col-sm col-md-12">SKILLS</div>
</div>
</div>
</div>
<div class="row">
<div class="col p-0">
ED
</div>
<div class="col p-0">
EXPERIENCE
</div>
</div>
<div class="row">
<div class="col p-0">OTHER</div>
</div>
</div>
CSS:
.row {
background: #f8f9fa;
}
.col,.col-sm {
border: solid 1px #6c757d;
}

Answer 2

First, when you separate into multiple cols you should wrap them inside a row ( so you have display:flex )
Second, you need to add classes to your columns to set how you want them to appear on different screen sizes. Note that as of bootstrap4 col-xs does not exist. Use col simple instead and overwrite it on larger screens.
In the example below i have used:
col-lg-8 and col-12 on the INTRO section.
col-lg-4 and col-12 on the Skills column wrapper.
col-lg-12 and col-4 on the Skills columns.
Also added a row to wrap the Skills columns
See below or jsFIddle
.row {
background: #f8f9fa;
margin: 10px;
}
[class*="col-"] {
border: solid 1px #6c757d;
}
.row,
[class*="col-"] {
min-width: 120px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col text-center">HEAD</div>
</div>
<div class="row">
<div class="col-lg-8 col-12">
INTRO
</div>
<div class="col-lg-4 col-12 p-0">
<div class="row mx-0">
<div class="col-lg-12 col-4 m-0">SKILLS</div>
<div class="col-lg-12 col-4 m-0">SKILLS</div>
<div class="col-lg-12 col-4 m-0">SKILLS</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
EDUCATION
</div>
<div class="col">
EXPERIENCE
</div>
</div>
<div class="row">
<div class="col">OTHER</div>
</div>
</div>

Answer 3

You need to wrap skill boxes in a div and give it classes d-flex
flex-wrap
By doing this, you will get the result without giving negative margin
col-md-8 col-sm-12 classes in intro div will make it 100% for
smaller device
No need to make any css changes
.row {
background: #f8f9fa;
margin:10px;
}
.col {
border: solid 1px #6c757d;
margin: 10px;
}
.row, .col {
min-width: 120px;
}
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col text-center">HEAD</div>
</div>
<!-- Changes here -->
<div class="row">
<div class="col-md-8 col-sm-12">
INTRO
</div>
<div class="col p-0">
<div class="d-flex flex-wrap">
<div class="col-4 col-md-12 m-0">SKILLS</div>
<div class="col-4 col-md-12 m-0">SKILLS</div>
<div class="col-4 col-md-12 m-0">SKILLS</div>
</div>
</div>
</div>
<!-- Changes Ends here -->
<div class="row">
<div class="col">
EDUCATION
</div>
<div class="col">
EXPERIENCE
</div>
</div>
<div class="row">
<div class="col">OTHER</div>
</div>
</div>

Answer 4

I would use a media query for this.
https://www.w3schools.com/css/css3_mediaqueries.asp
That is, keep your layout how you want it now as it is, then in the media query, just rearrange the layout to what you want it become on screen re-size.