responsive not working properly

Hello I have a CssLayout that I made responsive, it works when I  'minimize' the window but is not working when I 'maximize' it. For example:
if I open my window on  width-range~="1400px-"  and go down to  width-range~="0px-760px", responsive css properties works fine, but not on the other way, If open the window on  width-range~="0px-760px" and go to width-range~="1200px-" nothing happens.

Also on the developer tools I can see that the property 'width-range' is not updating when I make the width window bigger.

<div class="v-csslayout v-layout v-widget todo-view v-csslayout-todo-view v-has-width v-has-height" width-range="0px-760px" style="width: 100%; height: 100%;">

this is my css:

.todo-view[width-range~="0px-760px"] {
margin-left:0px; 
z-index: 1;
}

.todo-view[width-range~="761px-990px"] {
margin-left:50px; 
z-index: 1; 
} 

.todo-view[width-range~="991px-1200"] {
margin-left:100px;
z-index: 1;
}

.todo-view[width-range~="1201px-1400"] {
margin-left:150px;
z-index: 1; 
}

.todo-view[width-range~="1401px-"] {
margin-left:200px; 
z-index: 1; 
}

here is my class:

@Override public void enter(ViewChangeListener.ViewChangeEvent viewChangeEvent) {
log.info("enter");
removeAllComponents();
setResponsive(true);
setSizeFull();
addStyleName("todo-view");
if(rootLayout==null) {
rootLayout = new CustomLayout("todo");
}
rootLayout.setSizeFull();
rootLayout.setResponsive(true);
addComponent(rootLayout); resizeListeners.add(this);
}

I have a same problem, help pleeees!