I am using dx:ASPxGridView (Version-11.1) to show grid with Questions and having 3 options [(1)Yes or mostly yes. (2)Mid or undecided (3)No or mostly no] to choose for their respective questions. We already achieved the desktop view (please refer to attached image) but we want to make it responsive (as shown in attached image) when the page goes to mobile view. Below is grid code for original desktop view.
<dx:ASPxGridView ID="grdQuestionnaire" OnCustomColumnDisplayText="grdQuestionnaire_CustomColumnDisplayText" EnableCallBacks="false" ClientInstanceName="grdQuestionnaire" runat="server" AutoGenerateColumns="False"
KeyFieldName="QuestionID" OnHtmlRowCreated="ASPxGridView1_HtmlRowCreated" Width="100%">
<Columns>
<dx:GridViewDataTextColumn Caption="NO" VisibleIndex="0">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn Caption="Question" ShowInCustomizationForm="True" VisibleIndex="1">
<DataItemTemplate>
Are you by nature a forgiving persion?
</DataItemTemplate>
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn Caption="Yes or mostly yes" ShowInCustomizationForm="True" VisibleIndex="2">
<DataItemTemplate>
</DataItemTemplate>
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn Caption="Mid or undecided" ShowInCustomizationForm="True" VisibleIndex="3">
<DataItemTemplate>
</DataItemTemplate>
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn Caption="No or mostly no" ShowInCustomizationForm="True" VisibleIndex="4">
<DataItemTemplate>
</DataItemTemplate>
</dx:GridViewDataTextColumn>
<Columns>
</dx:ASPxGridView>