Bootstrap dropdown menu when collapsed - css

Question

Using bootstrap I have created a navbar using the bootstrap example online:
https://getbootstrap.com/docs/3.3/components/#navbar
My navbar includes a single dropdown menu which works well however on mobiles the navbar collapses into a dropdown menu which in turn contains my dropdown menu. i.e. a dropdown menu within a dropdown menu
Is it possible to have my downdown menu work normally however when the navbar collapses have the dropdown menu items listed as menu items in the collapsed menu not within a dropdown?
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

Answer 1

is this what you are looking for:jsfiddle
#media only screen and (max-width: 767px) {
.nav>li>a.dropdown-toggle {
display: none;
}
.nav .dropdown-menu {
display:block;
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
updated version: jsfiddle.net

Answer 2

I'm a bit late to the party but I was reading this looking for a way to "uncollapse" the dropdown menu on a mobile device. The css
Nikola Kostov gave (below) is great, there is just one issue with it. The responsive breakpoint for bootstrap is at 768px, the official documentation at https://v4-alpha.getbootstrap.com/layout/overview/ states:-
// Medium devices (tablets, 768px and up)
#media (min-width: 768px)
So for everything smaller than that you need to use
#media only screen and (max-width: 767px) {