CSS help needed for mobile

I have This CSS

@media only screen and ( min-width: 981px ) and ( max-width: 1024px ) {
.mytablet_off { display: none!important;}
.mytablet_on { display: block!important;}
.et_pb_column.et_pb_column_1_2, .et_pb_column {
width: 100%!important;
}
.et_pb_column.et_pb_column_1_4 { width: 50%!important; margin-right: 0!important;}
.et_pb_row.et_pb_equal_columns {
display: block;
}
}

Now all you need to do is define the row/section/module which you don’t want to show in iPad landscape with CSS Class: mytablet_off

And define the row/section/module which you want to show in iPad portrait, you can use this CSS Class: mytablet_on

on the homepage first section, so the look on iPad portrait is the same for landscape but on the landscape it disappears

Can you help me to make it work on iPad portrait and landscape?

Thank you in advance.