Adjusting Bootstrap NarBar Direction Based on Window Width
Open navbar to the right if window is wide enough, else add pull-right class to open the sub menu to the left so that the text does not get cut off.
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel-group" id="accordion">
<div id="divPrim" class="mesInfo">
<div class="panel-heading" role="tab" id="headingOne">
<button class="btn btn-primary" type="button" data-parent="#accordion" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button 1
</button>
</div>
<div class="panel-collapse collapse" id="collapseExample" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
PRIMER Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. PRIMER
</div>
</div>
</div>
<div id="divSeg" class="mesInfo">
<div class="panel-heading" role="tab" id="headingTwo">
<button class="btn btn-primary" type="button" data-parent="#accordion" data-toggle="collapse" data-target="#collapseExampleDos" aria-expanded="false" aria-controls="collapseExampleDos">
Button 2
</button>
</div>
<div class="panel-collapse collapse" id="collapseExampleDos" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
SEGON Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. SEGON
</div>
</div>
</div>
</div>
CSS
.mesInfo{
width: 40%;
float: left;
/*position: relative;*/
}
.collapse{
position: absolute;
width: 100%;
border: 1px solid #333;
background-color: #ccc;
right: 0px;
}