<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" crossorigin="anonymous">
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-12">
<h1>Servers</h1>
<ul>
<li>server 1</li>
<li>server 2</li>
<li>server 3</li>
</ul>
</div>
<div class="col-md-6 col-xs-12">
<h1>server details</h1>
<p class="lead">server 1 is online.</p>
</div>
</div>
</div>
<!-- /.container -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>I am seeking assistance in creating a bootstrap layout with two columns. The first column will display a list of servers while the second column will provide details about a selected server. In the absence of a server selection, it should show the number of servers online, among other information.
For mobile view, I aim to have the second column hidden initially, with the option to reveal it through a left to right swipe. Alternatively, keeping the second column hidden is also acceptable. In mobile view, the list of servers will be visible, and clicking on a server will transition the view to the second column, displaying the server details. The details can be loaded/rendered directly in the second column.
The classes for the columns are as follows:
Column 1: col-md-6, col-sm-12
Column 2: col-md-6, col-sm-12
I would appreciate any guidance on how to achieve this layout effectively. Thank you.