How to prevent bootstrap columns moving underneath each other in mobile width? - css

Question

First of all: a mayor thanks to anyone who answers to these type of questions. You have an immense influence to newbie coders who try to make their first solo projects. Much love!
To the point now, I've tried to make my tiny project's Bootstrap layout to behave the way I want for days now, and am admitting defeat. It's a timetable generator for a magic school, and the timetable appears if you click on a year and a subject. It appears on the right side (via JS), but on mobile width it moves underneath instead of staying on the right side.
Both columns are in a container and I've set each of their classes col-xs-6 col-sm-6 col-md-6, which by my logic should invade half of the container regardless of device width, but the right side still behaves as if it needs all 12 slots on mobile and moves underneath.
Issue illustrated with a picture:
How can I modify the Bootstrap column/row behaviour so that regardless of device width, the left buttons and right side with timetable would remain next to each other?
Here is my codepen: and snippet below:
const ari = "Arithmancy";
const alc = "Alchemy";
const md = "Magical Defence";
const herb = "Herbology";
const invo = "Invocation";
const run = "Runic Magic";
const cs = "Conflux Studies";
const beast = "Beastology";
const mm = "Mind Magic";
const mt = "Magical Theory";
const rm = "Ritual Magic";
const tech = "Technomancy";
//function to show #classResult. Couldn't figure out how to make a conditional to make it appear once year and path are chosen, so injecting it manually toe very timetable conditional instead
function show() {
document.querySelector("#intro").style.display = "none";
document.querySelector("#classResult").style.visibility = "visible";
}
$(document).ready(function () {
$('input[type="radio"]').on("change", function () {
//making chosen radio options to variables
const $year = $('input[name="year"]:checked');
const $path = $('input[name="path"]:checked');
//updating html in #classResult
//JUNIOR
if ($year.val() == "junior" && $path.val() == "artificer") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(md);
$("#lesson2").html(ari);
$("#lesson3").html(mt);
$("#lesson4").html(tech);
$("#lesson5").html(run);
$("#lesson6").html(cs);
} else if ($year.val() == "junior" && $path.val() == "cursebreaker") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(invo);
$("#lesson2").html(ari);
$("#lesson3").html(mt);
$("#lesson4").html(rm);
$("#lesson5").html(run);
$("#lesson6").html(cs);
} else if ($year.val() == "junior" && $path.val() == "crypto") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(invo);
$("#lesson2").html(beast);
$("#lesson3").html(herb);
$("#lesson4").html(rm);
$("#lesson5").html(mm);
$("#lesson6").html(alc);
} else if ($year.val() == "junior" && $path.val() == "healer") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(md);
$("#lesson2").html(beast);
$("#lesson3").html(herb);
$("#lesson4").html(rm);
$("#lesson5").html(mm);
$("#lesson6").html(alc);
} else if ($year.val() == "junior" && $path.val() == "guardian") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(md);
$("#lesson2").html(beast);
$("#lesson3").html(mt);
$("#lesson4").html(tech);
$("#lesson5").html(mm);
$("#lesson6").html(cs);
//SOPHOMORE
} else if ($year.val() == "sophomore" && $path.val() == "artificer") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(run);
$("#lesson2").html(cs);
$("#lesson3").html(md);
$("#lesson4").html(ari);
$("#lesson5").html(mt);
$("#lesson6").html(tech);
} else if ($year.val() == "sophomore" && $path.val() == "cursebreaker") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(run);
$("#lesson2").html(cs);
$("#lesson3").html(invo);
$("#lesson4").html(ari);
$("#lesson5").html(mt);
$("#lesson6").html(rm);
} else if ($year.val() == "sophomore" && $path.val() == "crypto") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(mm);
$("#lesson2").html(alc);
$("#lesson3").html(invo);
$("#lesson4").html(beast);
$("#lesson5").html(herb);
$("#lesson6").html(rm);
} else if ($year.val() == "sophomore" && $path.val() == "healer") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(mm);
$("#lesson2").html(alc);
$("#lesson3").html(md);
$("#lesson4").html(beast);
$("#lesson5").html(herb);
$("#lesson6").html(rm);
} else if ($year.val() == "sophomore" && $path.val() == "guardian") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(mm);
$("#lesson2").html(cs);
$("#lesson3").html(md);
$("#lesson4").html(beast);
$("#lesson5").html(mt);
$("#lesson6").html(tech);
//SENIOR
} else if ($year.val() == "senior" && $path.val() == "artificer") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(mt);
$("#lesson2").html(tech);
$("#lesson3").html(run);
$("#lesson4").html(cs);
$("#lesson5").html(md);
$("#lesson6").html(ari);
} else if ($year.val() == "senior" && $path.val() == "cursebreaker") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(mt);
$("#lesson2").html(rm);
$("#lesson3").html(run);
$("#lesson4").html(cs);
$("#lesson5").html(invo);
$("#lesson6").html(ari);
} else if ($year.val() == "senior" && $path.val() == "crypto") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(herb);
$("#lesson2").html(rm);
$("#lesson3").html(mm);
$("#lesson4").html(alc);
$("#lesson5").html(invo);
$("#lesson6").html(beast);
} else if ($year.val() == "senior" && $path.val() == "healer") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(herb);
$("#lesson2").html(rm);
$("#lesson3").html(mm);
$("#lesson4").html(alc);
$("#lesson5").html(md);
$("#lesson6").html(beast);
} else if ($year.val() == "senior" && $path.val() == "guardian") {
show(); //displaying the hidden "classResult"
$("#lesson1").html(mt);
$("#lesson2").html(tech);
$("#lesson3").html(mm);
$("#lesson4").html(cs);
$("#lesson5").html(md);
$("#lesson6").html(beast);
}
});
});
body {
background-image: url(https://t-ec.bstatic.com/images/hotel/max1024x768/106/106458589.jpg);
background-size: cover;
width: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
font-family: 'Poppins', serif;
}
/* background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(90,92,106,1) 0%, rgba(32,45,58,1) 81.3% );
}*/
.container.main {
width: 60%;
min-width: 300px;
background-color: #fffef5;
background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-light.png");
padding-bottom: 2%;
}
h1 {
font-size: 4em;
padding-top: 2%;
text-align: center;
/* color:white !important; */
font-family: 'Cinzel', serif;
}
#classResult {
visibility: hidden;
padding: 20px 0px;
/* background-color: rgba(255,255,255, 0.7); */
flex: 50%;
text-align: center;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
font-size: 1.1rem;
}
#intro {
visibility: visible !important;
}
.time {
color: gray;
font-size: 0.8rem;
}
#lunch-wrapper .time {
padding-top: 5%;
}
.lesson {
margin-bottom: 6%;
margin-top: -3%;
font-weight: 500;
color: rgb(52, 58, 85);
}
#lunch-wrapper {
border: 1px rgba(195, 185, 185, 0.445) solid;
border-radius: 15px;
margin-right: 10%;
margin-bottom: 6%;
}
.btn:focus {
background-color: #8D69AD;
}
.btn {
width: 150px !important;
}
.btn-secondary:not(:disabled):not(.disabled).active {
background-color: #8D69AD !important;
}
/* #classResult{
margin-top: 5%;
} */
/* making content 100% wide on mobile */
#media only screen and (max-width: 720px) {
.container.main {
width: 100%;
}
.lesson {
margin-bottom: 3%;
margin-top: -1%;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- My CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
<link rel="icon" type="image/png" href="favicon.png">
<link href="https://fonts.googleapis.com/css?family=Cinzel|ZCOOL+XiaoWei|Poppins" rel="stylesheet">
<title>Czocha Timetable</title>
</head>
<body>
<div class="container main">
<h1>Czocha Timetable</h1>
<div class="col-container">
<div class="row">
<div class="col-xs-6 col-md-6 col-sm-6">
<div class="year-sample" style="background: none">
<p>Select your year:</p>
<div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary rounded">
<input type="radio" name="year" id="junior" value="junior"> Junior
</label>
<label class="btn btn-secondary rounded mt-1">
<input type="radio" name="year" id="sophomore" value="sophomore"> Sophomore
</label>
<label class="btn btn-secondary rounded mt-1">
<input type="radio" name="year" id="senior" value="senior"> Senior
</label>
</div>
</div>
<div class="path-sample" style="background: none">
<p>Select your path:</p>
<div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary rounded">
<input type="radio" name="path" id="artificer" value="artificer"> Artificer
</label>
<label class="btn btn-secondary rounded mt-1">
<input type="radio" name="path" id="healer" value="healer"> Healer
</label>
<label class="btn btn-secondary rounded mt-1">
<input type="radio" name="path" id="crypto" value="crypto"> Cryptozoologist
</label>
<label class="btn btn-secondary rounded mt-1">
<input type="radio" name="path" id="guardian" value="guardian"> Guardian
</label>
<label class="btn btn-secondary rounded mt-1">
<input type="radio" name="path" id="cursebreaker" value="cursebreaker"> Curse Breaker
</label>
</div>
</div>
</div>
<!-- Timetable display #classResult -->
<div class="col-md-6 col-sm-6 col-xs-6" id="classResult">
<div id="intro">Summon your classes!</div>
<div class="time">9:15 - 10:00</div>
<div class="lesson" id="lesson1"></div>
<div class="time">10:15 - 11:00</div>
<div class="lesson" id="lesson2"></div>
<div class="time">11:15 - 12:00</div>
<div class="lesson" id="lesson3"></div>
<div id="lunch-wrapper">
<div class="time">12:00 - 14:00</div>
<div class="lesson">DAY BREAK</div>
</div>
<div class="time">14:15 - 15:00</div>
<div class="lesson" id="lesson4"></div>
<div class="time">15:15 - 16:00</div>
<div class="lesson" id="lesson5"></div>
<div class="time">16:15 - 17:00</div>
<div class="lesson" id="lesson6"></div>
</div>
</div>
</div>
<!-- My JS -->
<script src="javascript.js"></script>
<!-- jQuery & Bootstrap JS -->
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
<!-- ends content-->
</div>
</body>
</html>
Many thanks for anyone who takes time our of their day to look at this larping nerd's tiny project efforts!

Answer 1

It seems that "col-xs-6" dosen't exist in Bootstrap 4.
Instead of "col-xs-6" you have to put "col-6".
Here are the grid options from Bootstrap 4: https://getbootstrap.com/docs/4.0/layout/grid/#grid-options
This code should work for your columns.
<div class="col-6 col-md-6 col-sm-6">
It is also enough to write this code:
<div class="col-6">