I have the following code:
<input style="width:100%" >
BootStrap follows a simple rule ie
It means if you just provide
col-xs-?? then this gets priority and whatever number is provided here will be provided to all above size screen unless specifically provided.
Similar is the case for
col-sm-?? hence it won't affect
xs screen but will affect
lg screens if those are not provided separately.
Therefore, what is happening is its just depicting the property of BootStrap.
CSS priority: xs > sm > md > lg
That is why it is advised while writing CSS
Put media query for larger screens not for mobile screen.
Hope it answers your question.