Q:

Bootstrap Mobile Responsive

I am attempting to create a website that is mobile responsive within the Bootstrap CSS. 
However, the buttons are non responsive (as in they do not resize) when I attempt to resize the page. 
This is the CSS:
@media (min-width: 320px) and (max-width: 568px) {
    #button1, #dropdown1, #dropdownMenu1 {
        width: 50px;
        text-align: left;
    }
}

#button1, #dropdown1, #dropdownMenu1 {
    width: 120px;
    text-align: left;
}

#button2, #dropdown2, #dropdownMenu2 {
    min-width: 120px;
    text-align: left;
}

Here is a JSFiddle. 

A:

Everything is OK in your code.  just write the media query at the end of the CSS. 
the changed code looks like this. 

#button1, #dropdown1, #dropdownMenu1 {
    width: 120px;
    text-align: left;
}
#button2, #dropdown2, #dropdownMenu2 {
    min-width: 120px;
    text-align: left;
}
.caret {
    float: right;
    position: relative;
    top: 8px;
}
@media (min-width: 320px) and (max-width: 568px) {
    #button1, #dropdown1, #dropdownMenu1 {
        width: 50px;
        text-align: left;
    }
}

Here is the working JSFiddle.